受控组件

受控组件

import React, { Component } from 'react';

class ControlledCompExample extends Component {
  constructor() {
    super();
    this.state = {
      fullName: ''
    }
  }
  handleFullNameChange = (e) => {
    this.setState({
      fullName: e.target.value
    })
  }
  handleSubmit = (e) => {
    e.preventDefault();
    console.log(this.state.fullName)
  }
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label htmlFor="fullName">Full Name</label>
          <input
            type="text"
            value={this.state.fullName}
            onChange={this.handleFullNameChange}
            name="fullName" />
          <input type="submit" value="Submit" />
        </form>
      </div>
    );
  }
}

以上关键的地方在于：

　　state中设置表单的初始状态，当表单设置onChange，onChange中获取合成事件，通过evt.target.value把表单的值通过setState触发渲染，显示到界面上。

　　受控组件顾名思义，组件的状态受到控制，state与界面上显示的值时刻保持双向绑定。优点是方便校验（在onChange中），缺点是太臃肿。如果不需要监视表单的值，不需要实时校验，就使用非受控组件

　　如果不设置onChange，则界面上看不到我们输入的东西，即一直输入，但输入框总是空白的。因为value属性一直没发生变化（没有在onChange中对state进行更新）

非受控组件

通过ref获取表单的dom对象，再从中取值。下面通过ref将input的dom添加到this上：

<input
  type="text"
  ref={input => this.fullName = input} />

接着获取值：

this.fullName.value