我如何使ReactJS textarea加载来自道具的初始内容，但同时接受来自传入道具和用户的更新？

Question

我有一个React组件，其中有</code。我希望此</code具有以下所有特性：</p

null

• 的值必须指向其组件的状态
• 组件状态只能由GetInitialState中的传入道具设置；例如，setstate不能在componentdidupdate中使用；因此，在重新呈现
时，我永远无法更新状态，也无法更新我的</code的值

所以我的问题是，如何在ReactJS中创建一个</code，它的值可以由用户、初始加载时的传入道具以及对传入道具的更新来更新？

到目前为止，我想到的唯一糟糕的变通方法是使用“非托管”状态，我自己的JSON道具绑定到组件上，以代替正式的React状态。但这不是“反应方式”

下面是简化的代码，以防万一。

此代码在初始组件加载时工作，但再也不会使用props，因此无法从props更新</code内容。</p

var Input = React.createClass({
  componentDidUpdate: function() {
    // when component updates, can't use setState here to update state,
    // and thus can't update <textarea> content
  },
  getInitialState: function() {
    return {
      draftPath: this.props.draftPath,
      draftBody: this.props.draftBody
    };
  },
  handlePathChange: function(event) {
    this.setState({
      draftPath: event.target.value
    });
  },
  handleBodyChange: function(event) {
    this.setState({
      draftBody: event.target.value
    });
  },
  render: function() {
    return (
      <div id='cyoag-input-container'>
        <textarea id='cyoag-input-path' type='text'
          value={this.state.draftPath} onChange={this.handlePathChange} >
        </textarea>
        <textarea id='cyoag-input-body' type='text'
          value={this.state.draftPath} onChange={this.handleBodyChange} >
        </textarea>
      </div>
    );
  }
}




Answer 1

可以使用ComponentWillReceiveProps(nextProps)使用传入属性更新组件状态。

不要忘记将组件道具与nextProps进行比较，以便仅在必要时调用setstate。