Как я могу использовать Ref с HTMLInputElement?

Question

Работа с React и хуками:

У меня есть ParentCompontent, который содержит собственный лог c и контент, который воспроизводится при изменении его props.otherStuff (как обычно). Но у меня также есть специальный сделанный InputComponent. InputComponent отображает JSX.Element с <input> с некоторыми базовыми c атрибутами. Один атрибут - ref, который представляет собой функцию, которая возвращает HTMLInputElement в реквизит onSetInputRef. Единственное, что вам нужно знать, - это то, что любую функцию, которую я размещаю в пропе, onSetInputRef дает мне HTMLInputElement в качестве аргумента, чтобы я мог получить к нему доступ в родительском компоненте.

Как я могу использовать свой useRef и "установить" его как HTMLInputElement. Есть ли способ? Также, если это возможно. Когда props.otherStuff меняется, я все еще хочу сосредоточиться на этом элементе ввода. Кто-нибудь, кто может мне помочь? Я не так хорош с ref ..

Итак, вот что я попробовал:

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

Вам необходимо использовать свойство current вашего реф:

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

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

Надеюсь, это поможет.