首页 文章

ReactJS setState更改不从父组件传播到子组件[重复]

提问于
浏览 次
0

这个问题在这里已有答案：

我有两个带有父子关系的简单reactjs组件 . 子进程包含一个带有onChange事件的输入和一个对setState的父回调 . 当我运行它时，setState似乎在父组件中工作，但传递给子组件的props似乎没有更新 . 有任何想法吗？这是一段代码片段：

var FooInput = React.createClass({
  handleInputChange: function(e) {
    this.props.onInputChange(e.target.name, e.target.value);
  },
  render: function() {
    return (
      <div>
        <input name="foo" value={this.props.foo} onChange={this.handleInputChange} />
      </div>
    )
  }
})

var FooApp = React.createClass({
  getInitialState: function() {
    return {
      foo: 'bar',
    };
  },
  handleInputChange: function(key, value) {
    this.setState({key: value});
  },
  render: function() {
    return (
      <div>
        <FooInput
            foo={this.state.foo}
            onInputChange={this.handleInputChange} />
      </div>
    );
  }
});

在上面的示例中，尽管在 FooApp 父组件中触发 handleInputChange 并且foo通过 this.props 传递到子组件，但 FooInput 子组件中的输入值保持为"bar" . 为什么输入值不会改变以反映新状态？

javascript reactjs

1 回答

  • 3

    你实际上是通过 this.setState({key: value}) 设置一个名为 key 的状态变量 . 如果需要变量键，可以使用括号：

    handleInputChange: function(key, value) {
    this.setState({[key]: value});
}

    或者创建一个新对象 .

    handleInputChange: function(key, value) {
    const newState = {};
    newState[key] = value;
    this.setState(newState);
}
    回复于

相关问题