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

【问题标题】：Assigning ref to HTMLInputElement giving error in typescript将 ref 分配给 HTMLInputElement 在打字稿中给出错误
【发布时间】：2020-09-11 09:09:52
【问题描述】：

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

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

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

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

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

我的完整代码：

【问题讨论】：

是输入类组件还是功能组件。如果它是一个功能组件，您是否使用 React.forwardRef？
你能告诉我们完整的Component 失败的地方吗？谢谢:)
如果它是一个类组件，你仍然需要转发 ref，否则默认情况下 ref 会进入类实例本身。
@Shubham Khatr 我正在使用功能组件
完整代码更新。如果可能的话，在此代码上使用“forwardRef”-Shubham Khatri @Yooooomi

标签： reactjs typescript react-hooks use-ref

【解决方案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} />
));

由于您使用的是semantic-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了解更多详情

【讨论】：

我已经更新了完整的代码。如果可能的话，你能告诉我使用 React.forwardRef 来解决这个问题吗
好吧，我们不能将 forwardRef 与外部库一起使用，但我会用可能的解决方案更新我的帖子
哇非常感谢@Shubham Khatri。我是反应js的初学者，非常感谢您的支持