函数组件的响应引用，无法获取引用：“函数组件不能被赋予引用”

如何解决函数组件的响应引用，无法获取引用：“函数组件不能被赋予引用”

我正在构建一个带有 fluentui/react-nothstar 包控件的 React 网站。您可以在下面找到文本 + 按钮的简化示例。我的方案是在按下按钮时访问文本控件。我需要类似 document.findElementById 的东西，它通过 refs in React 工作。它适用于组件控件（扩展 React.Component），但对于 northstar 组件失败并出现错误：

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

根据警告详细信息和 Text 控件定义，它看起来像是一个函数组件，我必须使用 React forwardRef 来访问它的属性。我尝试了多种方法来执行此操作 here、here 和 here，但都没有成功。

import React from 'react';
import {
    Text,Button,}
    from '@fluentui/react-northstar';

class Welcome extends React.Component {

    private textRef: any = React.createRef();

    private doJob1() {
        console.log("doJob1 executed");
        console.log(this.textRef.current); // returns null
    }

    render() {
        return (
            <div>
                <div>Welcome</div>
                <div>
                    <Text
                        ref={this.textRef}
                        content="My fancy text control" />
                    <Button
                        onClick={this.doJob1.bind(this)}
                        content="My fancy button" />

                </div>
            </div>
        );
    }
}

export default Welcome;

在大多数情况下，我可以通过使用 props 和 state 来避免直接访问元素，但在某些情况下，我仍然需要一个组件引用（更改焦点、打开对话框、更新未在我的状态中定义的值）。

在上面的示例中，访问 Button 单击处理程序中的 Text 控件的正确方法是什么？

解决方法

在这种情况下，图书馆需要转发引用 which apparently they don't。

但一般来说，您希望使用 controlled components 来捕获这样的用户输入。基本上，您需要设置一个变量来跟踪父组件中的值（欢迎，在您的情况下），将其作为 value 传递给 <Text /> 组件并从其 {{ 1}}。然后，在按钮的 onChange 上，无论用户输入是什么，该值都将是最新的。

,

原来 Ref 就是为此而设计的：

<Ref innerRef={this.textRef}>
    <Text content="My fancy text control" />
</Ref>