Присвоение ссылки HTMLInputElement дает ошибку в машинописном тексте

Question

В переменной useRef нельзя установить входной элемент

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

   <Input name="answer" ref={inputRef}/>

На <Input ref=""> Я получаю следующую ошибку

ht tps://stackru.com/imag es/30ee023044946f6b9855290cd84e8229c73371b7.png

Любая идея, как это исправить. Заранее спасибо

Мой полный код:

ht tps://stackru.com/imag es/2ed1df48f8b3146263af213fe582bb0f6e4ad755.png

Answer 1

Ваш реф не назначен HTMLInputElement но Inputсоставная часть. Вам необходимо определить его тип соответственно

Поскольку Input является функциональным компонентом, вы не можете напрямую указать ссылку на него, вам нужно переслать ссылку, и для этого вам нужно использовать React.forwardRef

const inputRef = React.useRef<HTMLInputElement>(null);
..
<Input name="answer" ref={inputRef}/>

...
const Input = React.forwardRef((props, ref: React.Ref<HTMLInputeElement>) => (
  <input ref={ref} {...props} />
));

Поскольку вы используете semantic-ui-react, чтобы передать ссылку на компоненты, вам необходимо использовать Ref компонент из библиотеки

import {Ref } from 'semantic-ui-react';
...

const inputRef = React.useRef<HTMLInputElement>(null);
..
<Ref innerRef={inputRef}><Input name="answer" ref={inputRef}/></Ref>

Проверить bit.dev Больше подробностей