为什么我不能通过道具将状态传递给受控文本组件？

Question

我很困惑为什么 React 坚持要我给我的受控文本输入组件自己的内部状态。我按照官方文档创建了一个受控输入，而 React 通过控制台对我大喊大叫：

*warning.js:36 警告：ClientInfoTextInput 正在更改要控制的文本类型的不受控制的输入。输入元素不应从不受控切换到受控（反之亦然）。决定在组件的生命周期内使用受控输入元素还是不受控输入元素。

render() {
    return (
      <input type="text"
        className={styles.ClientInfoTextInput}
        value={this.props.propToPass} 
        onChange={this.props.propMethodToPass}
      />
    )

那么，为什么我不能通过 props 将状态传递给受控的输入组件而不让 React 不高兴呢？

Answer 1

如果不查看完整代码就很难调试您的组件，但是通过 props 将状态传递给受控输入组件的一种方法如下：http://codepen.io/PiotrBerebecki/pen/bwLjaE

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      textInParent: ''
    };
    this.handleTextFromChild = this.handleTextFromChild.bind(this);
  }

  handleTextFromChild(data) {
    this.setState({
      textInParent: data
    });
  }

  render() {
    return (
      <div>
        <InputForm propMethodToPass={this.handleTextFromChild}
                   propToPass={this.state.textInParent} /> 
      </div>
    );
  }
}


class InputForm extends React.Component {
  render() {
    return (
      <div>
        <input type="text"
               value={this.props.propToPass}
               onChange={(event) => this.props.propMethodToPass(event.target.value)} />
        <p>Text received from Parent via props: {this.props.propToPass}</p>
      </div>
    );
  }
}


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