Javascript React.js中父组件和子组件之间的通信

只是在React中遇到了一个关于父组件和子组件之间通信的问题

儿童

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 Child=React.createClass({
getInitialState（）{
返回{
childState:this.props.state，
};
},
变更状态（e）{
this.setState（{e.target.id}）；
},
渲染：函数（）{
返回(
1.
2.
);
},
});

家长

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

var Parent=React.createClass({
getInitialState（）{
返回{
父状态：“1”，
};
},
渲染：函数（）{
返回(
);
},
});

---

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

要实现此行为，您需要通过道具与父组件进行通信

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} />
        );
    },
});

var Child=React.createClass({
渲染：函数（）{
返回(
1.
2.
);
},
});
var Parent=React.createClass({
getInitialState（）{
返回{
父状态：“1”，
};
},
changeState:function（）{
this.setState（{parentState:e.target.id}）；
},
渲染：函数（）{
返回(
);
},
});

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

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

---

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

要实现此行为，您需要通过道具与您的父组件进行沟通

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} />
        );
    },
});

var Child=React.createClass({
渲染：函数（）{
返回(
1.
2.
);
},
});
var Parent=React.createClass({
getInitialState（）{
返回{
父状态：“1”，
};
},
changeState:function（）{
this.setState（{parentState:e.target.id}）；
},
渲染：函数（）{
返回(
);
},
});

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

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

---

请原谅我的打字错误-我现在在办公室，但因为你还没有答案，我想帮忙。

谢谢你的回复。儿童状态如何？看起来现在在子组件中，onClick调用父函数，所以我不能调用它自己的函数来更新它的状态。据我所知，你想在一次单击中更改父和子状态，以便两者具有相同的可访问状态。就是这样：）-您现在可以使用this.props.state访问子组件中的状态是的，没错。谢谢这完全解决了我的问题。很高兴我能帮上忙：）谢谢你的回复。儿童状态如何？看起来现在在子组件中，onClick调用父函数，所以我不能调用它自己的函数来更新它的状态。据我所知，你想在一次单击中更改父和子状态，以便两者具有相同的可访问状态。就是这样：）-您现在可以使用this.props.state访问子组件中的状态是的，没错。谢谢这完全解决了我的问题。很高兴我能帮忙：）