反应引用状态为空

Question

我想通过引用访问子组件的状态，但引用的状态始终为空。

在我的 React 应用程序中，我有一个 Editor（基本上，它是一个表单）可以操纵自己的状态，例如值变化，更新。编辑器在多个页面上使用。

Editor.jsx

    export default class Editor extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                value1: null,
                ... other values 
            };
         }

         onValue1Change = (e) => {
            this.setState({value1: e.target.value});
         }

         onSave = (e) => {
            // save values
         }

         render() {
             return (
                <div>
                    <input value={this.state.value1} onChange={this.onValue1Change}/>
                    ... other input fields
                    <button onClick={this.onSave}>Save</button>
                </div>
             )
         }
     }

现在，RegisterForm 涵盖了编辑器中的所有字段。我在 Editor 中做了一个小改动以隐藏保存按钮，这样我就可以在 RegisterForm:

中使用它

RegisterForm.jsx

    export default class RegisterForm extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                email: null,
                firstname: null,
                lastname: null
            };
            this.Editor = React.createRef();
        }

        onSave = (e) => {
            let childState = this.Editor.current.state;
            // childState is ALWAYS null!
        }

        render() {
            return (
                <div>
                    <input value={this.state.email} onChange={this.onEmailChange}/>
                    <input value={this.state.firstname} onChange={this.onFirstnameChange}/>
                    <input value={this.state.lastname} onChange={this.onLastnameChange}/>
                    ...
                    <Editor ref={this.Editor} showSave={false}/>
                    ...
                    <button onClick={this.onSave}>Save</button>
                </div>
            )
        }
    }

原来 this.Editor.current.state 总是空的。

我有两个个问题。

为什么 this.Editor.current.state 为空？
如果我想使用道具，我应该如何更改我的代码？例如。如果我让 RegisterForm 将道具传递给编辑器，我会想象这样的事情：

Editor.jsx

    export default class Editor extends React.Component {
         // same constructor
         onValue1Change = (e) => {
            this.setState({value1: e.target.value}, () => {
                if(this.props.onValue1Change) this.props.onValue1Change(e);
            });
         }
         // same render
     }

RegisterForm.jsx

     export default class RegisterForm extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                email: null,
                firstname: null,
                lastname: null,
                value1: null,
            };
        }

        onValue1Change = (e) => {
            this.setState({value1: e.target.value});
        }

        render() {
            return (
                <div>
                    <Editor showSave={false} onValue1Change={this.onValue1Change}/>
                    ...
                </div>
            )
        }
    }

是否让Child组件渲染两次？关于如何改进它有什么建议吗？

Answer 1

您正在将 ref 作为 prop 传递给 <Editor/> 组件，但之后没有对其进行任何操作。

例如：

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>;

通过forwardRef()回调参数接收props和ref，然后将ref传给子节点

这叫做ref forwarding

我做了一个code sandbox给大家测试一下！

反应引用状态为空

React ref state is null

components

state

ref

reactjs