用键值修改 parent 个组件状态

Question

我在 React 中有一个 child 组件，我想通过调用一个函数并提供键和值来修改 parent 组件。理想情况下它会像这样

var FirstView = React.createClass({

handleStateChange: function(key, value) {
    this.setState({
        key: value
    });
}.

render: function() {
    return (
        <div>
            <SecondView onStateChange={this.handleStateChange} />
        </div>
    )
}
});

var SecondView = React.createClass({

handleClick: function() {
    this.props.onStateChange('theParent', 'isNowChanged');
},

render: function() {
    return (
        <div onClick={this.handleClick}>Stack Overflow</div>
    );
}
})

我不完全确定这是否是解决此问题的最佳方法，但我想像上面那样传递一个键和一个值。不幸的是，反应不想打球， parent 的状态似乎没有改变。有没有明智的方法来解决这个问题？

谢谢！

Answer 1

在 FirstView 的 handleStateChange 中，您有以下内容：

handleStateChange: function(key, value) {
    this.setState({
         key: value
     });
}.

传递给 setState 的字典使用文字 key 而不是传递给 handleStateChange 函数的变量 key。请尝试以下操作：

handleStateChange: function(key, value) {
    newState = [];
    newState[key] = value;
    this.setState(newState);
},

用键值修改 parent 个组件状态

Modify parent component state with key value

javascript

reactjs