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

Question

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

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

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

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

知道如何解决这个问题。提前致谢

我的完整代码：

Answer 1

您的参考未分配给 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 了解更多详情

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

Assigning ref to HTMLInputElement giving error in typescript

typescript

reactjs

react-hooks

use-ref