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

Question

我很困惑为什么React坚持认为我将受控文本输入组件赋予了自己的内部状态。我按照官方文档创建了一个受控输入，React正在通过控制台向我发出嘎嘎声：

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

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

那么为什么我不能通过道具将状态传递给受控输入组件而不让React感到不安？

Answer 1

在没有看到完整代码的情况下调试组件很困难，但通过props将状态传递给受控输入组件的一种方法如下：

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')
);