如何正确标记回调引用的类型

Question

function App() {
    const inputRef: any = useCallback((node: ITextInputRef)=> {
        if(node !== null) {
          setValue(node.value);
        }
    }, []);

    const [value, setValue] = useState("");

    const handleClick = () => {
      console.log("textInput value", inputRef.current!.value);
      setValue(inputRef.current!.value);
    }
    return (
      <>
        <input type="text" value={value} onChange={() => {}} /><br/>
        <TextInput ref = {inputRef}/>
        <button onClick={handleClick}>click</button>
      </>
    );
}

interface ITextInputRef {
  value: string;
}
const TextInput = forwardRef((props,ref: ForwardedRef<ITextInputRef>) => {
    const [value, setValue] = useState("");
    const inputRef = useRef<HTMLInputElement>(null);
    const changeValue = (e: ChangeEvent<HTMLInputElement>) => {
      setValue(e.target.value);
    };
    useImperativeHandle(ref, () => ({
      value: inputRef.current!.value,
    }));
    return <input ref = {inputRef} onChange={changeValue} value={value}/>
})

My code is as above, but there is a error: Property 'current' does not exist on type '(instance: ITextInputRef | null) => void'.If I set the type to any, it works fine

Answer 1

To answer your question directly, useCallback does not return a React.MutableRefObject<> like useRef does. It simply memoizes your function so that it doesn't change between renders. The return type of useCallback is the same as your function, which in your example is (node: ITextInputRef) => void .

If you want to store the reference passed to a callback ref, you have to supply your own ref object. The type passed to your callback will be HTMLInputElement for input elements:

const inputRef = useRef<HTMLInputElement>(null);
const storeRef = useCallback((ref: HTMLInputElement) {
  if (ref !== null)
    inputRef.current = ref;
}, []);

return <input ref={storeRef} />;

Callback refs are a lower level tool for when you need to do something precisely on mount or unmount. They'll get called on mount with the reference value, and on unmount with null . If all you need is to do is use the reference during events, you can take a shortcut and pass the ref object directly to the ref attribute. You just have to assume that the current property might be null when you try to use it:

const inputRef = useRef<HTMLInputRef>(null);
return <input ref={inputRef} />

Since your example is doing a lot of interesting experiments, also consider this: callback refs and useImparativeHandle are tools of last resort, for when you can't fit what you're doing into React's model.

To simply set the state for an input, first try using plain React events:

const TextInput = function() {
  const [value, setValue] = useState('');

  function changeValue(e: ChangeEvent<HTMLInputElement>) {
    setValue(e.currentTarget.value);
  }

  return <input onChange={changeValue} value={value} />
}