React 初学 - 受控组件 - 个人笔记29

如果你的 React 组件具有用户可以键入的输入字段，那么它将是一个受控的输入表单。

总结：受控组件类似vue里的双向数据绑定。随着输入，直接控制状态。叫受控组件。

推荐平时多写受控组件，因为官方也是说尽量少用ref：

案例：

class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    // change code below this line
    this.handleChange.bind(this)
    // change code above this line
  }
  // change code below this line
handleChange(event) {
  this.setState({
      input: event.target.value
    });
}
  // change code above this line
  render() {
    return (
      <div>
        { /* change code below this line */}
<input value = {this.state.input} onChange = {this.handleChange.bind(this)}/>
        { /* change code above this line */}
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};

案例2：受控表单

上一个案例展示了 React 能控制某些元素的内部 state，比如input和textarea，这使得这些元素成为受控组件。这也适用于其他表单元素，包括常规的 HTML 表单form元素。

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      submit: ''
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange(event) {
    this.setState({
      input: event.target.value
    });
  }
  handleSubmit(event) {
    // change code below this line
    event.preventDefault();
    this.setState({
      submit:this.state.input
    })
    // change code above this line
  }
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          { /* change code below this line */ }
          <input value={this.state.input} onChange={this.handleChange}></input>
          { /* change code above this line */ }
          <button type='submit'>Submit!</button>
        </form>
        { /* change code below this line */ }
        <h1>{this.state.submit}</h1>
        { /* change code above this line */ }
      </div>
    );
  }
};

点击按钮后，输入框的内容显示在h1标签里面