React ref state is null

Question

我想通过使用引用来访问Child组件的状态，但是引用的状态始终为null。

在我的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始终为空。

我有两个问题。

1. 为什么this.Editor.current.state为空？

2. 如果我想使用道具，应该如何更改代码？例如。如果我让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作为道具传递给<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！