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}))
}
})
可以把inputRef当参数传来传去呀