如何将 Ref 与 HTMLInputElement 一起使用？

Question

Working with React and hooks:

I have this ParentCompontent which contains its own logic and content which rerenders when its props.otherStuff changes (as usual). But I also have a special made InputComponent . The InputComponent renders a JSX.Element with an <input> with some basic attributes. One attribute is ref which is a function that returns the HTMLInputElement to the prop onSetInputRef . The only thing you need to know is that whichever function I place in the prop onSetInputRef gives me the HTMLInputElement as an argument so I can access it in the parent component.

How can i use my useRef and "set" it as the HTMLInputElement. Is there a way? Also if that is possible. When props.otherStuff changes I still want to focus on that input element. Anyone that can help me? Im not that good with ref..

So here is what i've tried:

const ParentComponent = (props) => {

   const inputRef = React.useRef<HTMLInputElement>(null)

    React.useEffect(() => {
        inputRef.focus()
    }, [props.otherStuff]);

   const setRef = (inputElement: <HTMLInputElement>) => {
    inputRef = inputElement;
   }

return (
    <>
        <>
         {render props.otherStuff}
        </>
        <InputComponent
         ...otherProps
         onSetInputRef={setRef}
       />
     </>
    )
 }

Answer 1

You need to use the current property of your ref:

React.useEffect(() => {
  inputRef.current.focus()
}, [props.otherStuff]);

const setRef = (inputElement: HTMLInputElement) => {
  inputRef.current = inputElement;
}

I hope this helps.