javascript - React.js 中父子组件之间的通信

Question

刚遇到一个React中父子组件通信的问题。

child

var Child = React.createClass({
    getInitialState() {
        return {
            childState: this.props.state,
        };
    },
    changeState(e) {
        this.setState({e.target.id});
    },
    render: function () {
        return (
            <button id='1' onClick={this.changeState}>1</button>
            <button id='2' onClick={this.changeState}>2</button>
        );
    },
});

父级

var Parent = React.createClass({
    getInitialState() {
        return {
            parentState: '1',
        };
    },
    render: function () {
        return (
            <Child state=this.state.parentState />
        );
    },
});

所以现在父组件会将初始状态“1”传递给子组件，我希望子组件可以同时更改子组件和父组件的状态。例如，当单击第二个按钮时，子状态和父状态都设置为“2”。我怎样才能做到这一点？谢谢大家!

Answer 1

要实现此行为，您需要通过 props 与父组件通信。

var Child = React.createClass({
    render: function () {
        return (
            <button id='1' onClick={this.props.changeState}>1</button>
            <button id='2' onClick={this.props.changeState}>2</button>
        );
    },
});

var Parent = React.createClass({
    getInitialState() {
        return {
            parentState: '1',
        };
    },
    changeState: function(){
      this.setState({parentState: e.target.id});
    },
    render: function () {
        return (
            <Child changeState={this.changeState} state={this.state.parentState} />
        );
    },
});

这背后的想法是，您将 changeState 函数作为函数从父组件传递给子组件，并使其可通过 props 访问。这样，当您在子组件中调用 prop 函数时，父组件中的函数将被执行。

这样一来，您也不需要在子组件中保留第二个“单独”状态，因为父组件的状态在两者中都可用，并且在两者中具有相同的值。

如有任何打字错误，请原谅 - 我在办公室，但由于您还没有答复，我想提供帮助。