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

Question

在 useRef 变量中不能设置为输入元素

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

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

在<Input ref="">我收到以下错误

任何想法如何解决这个问题。提前致谢

我的完整代码：

Answer 1

您的 ref 没有分配给HTMLInputElement一个Input组件。您需要相应地定义它的类型

由于 Input 是一个功能组件，因此您不能直接在其上指定 ref，您需要转发 ref 并为此使用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-react，为了将 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更多详情