在react hooks中 如何暴露大量方法

function FancyInput(props, ref) {
  const inputRef = useRef();
  /* 假如我要在这里暴露大量方法,难道我只能全部写到这里?
     我就不能吧 () => ({})的对象单独提前到一个文件中?
     但是我单独提取了,又会导致我的作用域链,无法找到当前inputRef,该如何解决?
    */
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
  return <input ref={inputRef} ... />;
}
FancyInput = forwardRef(FancyInput);

采用这种解决方法

 useImperativeHandle(ref, () => {
    return getHandle(option, setOption)
  }, [option])

// 这个可以单独一个文件
let getHandle = (opt, setOption) => ({
        getValue:() => {
          return opt.value
        },
        setValue: (value) => {
          setOption((old) => ({...old, value: value}))
        },
        onChange: (customChange) => {
          setOption((old) => ({...old, customChange}))
        },
        setOption: (obj) => {
          setOption((old) => ({...old, ...obj}))
        }
      })
阅读 3.1k
1 个回答

可以把inputRef当参数传来传去呀

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题