Javascript 功能组件的React ref，无法获取引用："；不能为功能组件提供参考；

我正在建立一个带有包控件的React网站。下面是一个简化的文本+按钮示例。我的场景是在按下按钮时访问文本控件。我需要类似document.findElementById的东西，它可以通过。它对组件控件（扩展React.component）非常有效，但对Northstar组件无效，错误如下：

警告：不能为功能组件提供参考。尝试访问此ref将失败。您是否打算使用React.forwardRef（）？

根据警告详细信息和文本控件定义，它看起来像是一个函数组件，我必须使用它来访问其属性。我尝试了多种方法，但都没有成功

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;

从“React”导入React；
进口{
文本，
按钮
}
来自“@fluentui/react northstar”；
类欢迎扩展React.Component{
private textRef:any=React.createRef（）；
私人doJob1（）{
log（“doJob1已执行”）；
console.log（this.textRef.current）；//返回null
}
render（）{
返回(
欢迎
);
}
}
出口默认值欢迎；

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

---

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

在这种情况下，库需要转发引用

---

但一般来说，您希望使用来捕获这样的用户输入。基本上，您需要设置一个变量来跟踪父组件中的值（在您的情况下，欢迎），将其作为

值

传递给

组件，并从其

onChange

捕获更改。然后，在按钮的

onClick

，无论用户输入什么，该值都将是最新的。

谢谢！这正是我用来维护单一真理来源的方法，它在大多数情况下都很有效，但并非所有情况下都有效。例如，Datepicker

onDateChange

没有在event.target.value中提供新的值，我需要控件引用来读取该值：我不知道fluent ui的细节，但您是否尝试过onDateChange={console.log}，以查看它返回的格式？