非受控组件

1 .类似于传统的HTML表单输入，如果想要获取输入的值，从ref获取他们

class Form extends Component {
  handleSubmitClick = () => {
    const name = this._name.value;
  }
  render() {
    return (
      <div>
        <input type="text" ref={input =>this._name = input}
  defaultValue="默认值"
 />
        <button onClick={this.handleSubmitClick}>Sign up</button>
      </div>
    );
  }
}

2 .你需要自己从表单域中拉取相应的值，在表单发生提交的时候
3 .不想为每一个状态更新都编写数据处理函数
4 .通过defaultValue属性可以为表单添加一个默认值
5 .<input type="checkbox"> 和 <input type="radio">
6 .<select> 和 <textarea> 支持 defaultValue
7 .<input type="file" />始终是一个非受控组件，他的值只能由用户设置，不能通过代码控制
8 .

受控表单

1 .接受当前值作为属性，或者作为改变值得时候调用

class Form extends Component {
  constructor() {
    super();
    this.state = {
      name: '',
    };
  }

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

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

2 .react表单对照表

Element Value property  Change callback New value in the callback
<input type="text" />   value="string"  onChange    event.target.value
<input type="checkbox" />   checked={boolean}   onChange    event.target.checked
<input type="radio" />  checked={boolean}   onChange    event.target.checked
<textarea />    value="string"  onChange    event.target.value
<select />  value="option value"    onChange    event.target.value

3 .非受控组件将真实数据存储在DOM节点中。使用非受控组件得时候，更加容易集成React和非React代码
4 .