React受控组件

所谓受控组件，就是组件中的状态是可以根据用户的输入，实时的进行改变，并且展示在界面上，常见的受控组件：<input/>、<select/>、<radio/>这些组件要根据用户输入的改变，而改变其中的属性值。 先来看一个例子：

class NameForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {name: ''};
        this.handleNameChange = this.handleNameChange.bind(this);
    }

    handleNameChange(event) {
        this.setState({ name: event.target.value });
    };

    render() {
        return (
            <div>
                <input type="text" value={this.state.name} onChange={this.handleNameChange}/>
            </div>
        );
    }
}

实现原理 name 开始为空字符串 ' '， 当用户输入'a'时，触发 handleNameChange 事件并且调用 setState 的方法，更新 name 的值，进而触发 render 函数，将 name 的新值 'a' 展示在界面中； 当用户继续输入 'b' 时，触发 handleNameChange 事件并且调用 setState 的方法，更新 name 的值，进而触发 render 函数，将 name 的新值 'ab' 展示在界面中；

React非受控组件

表单数据由DOM本身处理。即不受 setState() 的控制，与传统的 HTML 表单输入相似，input 输入值即显示最新值（使用 ref 从 DOM 获取表单值；

先来看一个例子：

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.input.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={(input) => this.input = input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}