1

我正在使用fluentui/react-nothstar包控件构建一个 React 网站。您可以在下面找到文本 + 按钮的简化示例。我的方案是在按下按钮时访问文本控件。我需要类似 document.findElementById 的东西，它通过React 中的 refs 工作。它适用于组件控件（扩展 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来访问它的属性。我在这里、这里和这里尝试了多种方法来做到这一点，但没有成功。

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 来避免直接访问元素，但在某些情况下，我仍然需要一个组件引用（更改焦点、打开对话框、更新未在我的 state 中定义的值）。

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

4

2 回答 2

1

在这种情况下，图书馆需要转发 ref，显然他们没有。

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

于 2021-06-07T06:57:58.373 回答
1

原来Ref是为此而设计的：

<Ref innerRef={this.textRef}>
    <Text content="My fancy text control" />
</Ref>
于 2021-06-25T01:30:25.963 回答