React - 使用 refs 将焦点函数传递给子组件

Question

在我的父组件构造函数（基于类）中，我使用以下方法为输入字段添加了一个引用：

this.usernameRef = React.createRef();

这在父组件中工作得很好。例如，以下工作正常：

 const username = this.usernameRef.current.value; // this works

我将 .focus() 对 ref 的调用传递给一个子组件，如下所示：

<ChildComponent
    onClick={() => this.usernameRef.current.focus()}
/>

在我的子组件中，它通过 onClick 事件被调用：

<a href="#" onClick={onClick} />

当应用程序运行时，当我点击该链接时，我收到以下错误：

e.usernameRef.current.focus is not a function

我应该以不同的方式解决这个问题吗？

不管怎样，子组件是基于函数的。

谢谢

Answer 1

在 React 中我们必须使用 React.forwardRef

在下面的示例中，FancyButton 使用 React.forwardRef 获取传递给它的 ref，然后将其转发给它渲染的 DOM 按钮：

const FancyButton = React.forwardRef((props, ref) => (  <button ref={ref} className="FancyButton">    {props.children}
  </button>
));

// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;