Question

我一直试图改变孩子的财产但是失败了。我已经尝试了大多数生命周期的反应方法，但它们似乎都没有用（didMount propsUpdate等）。

任何帮助将不胜感激

http://codepen.io/yogainalift/pen/KMPvNz

var Field = React.createClass({
  getInitialState: function() {
    return {
      message: this.props.setMessage || 'should change this one'
    }
  },

  render() {
    return (
      <div>
        {this.state.message}
      </div>
    )
  }
});

var App = React.createClass({
  getInitialState: function() {
    return {
      inputField: ''
    }
  },

  handle(event) {
    console.log(event.target.value);
    this.setState({
      inputField: event.target.value
    })
  },

  render() {
    return (
      <div>
        <input type='text' placeholder='changing this text' onChange={this.handle}/>
        <Field setMessage={this.state.inputField} />
      </div>
    )
  }
});

ReactDOM.render(<App />, document.getElementById('app'));

Answer 1

根据我对你的问题的理解，你试图将Field渲染与输入相同，我是对的吗？

您的Field组件正在使用状态在

上呈现其内容

<div>
     {this.state.message}
</div>

你应该使用

<div>
    {this.props.setMessage}
</div>

您还可以使用componentWillReceiveProps生命周期方法为Field设置新状态。代码看起来像这样：

componentWillReceiveProps: function(nextProps) {
  this.setState({
    message: nextProps.setMessage || 'should change this one'
  });
}

希望它有所帮助。

从父级更新组件的属性

1 个答案: