将ref分配给HTMLInputElement在打字稿中给出错误

Question

在useRef变量中无法设置为输入元素

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

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

在<Input ref="">上出现以下错误

任何想法如何解决此问题。在此先感谢

我的完整代码：

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} />
));

由于您使用的是语义UI反应，为了将ref传递给组件，您需要使用库中的Ref组件

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

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

检查bit.dev以获得更多详细信息