react随笔8 表单

表单

在HTML表单中，表单元素与React中的其他DOM元素有所不同，因为HTML的表单元素一旦创建就会保留一些内部状态。
如下边的表单，接受一个唯一的name。

<form>
  <label>
    Name: <input type="text" name="name" />
  <label>
  <input type="submit" value="submit" />
</form>

当点击提交表单的时候，HTML默认会是表达跳转到一个新页面。在React中也是一样的。但是在大多数情况下，我们都希望在提交的时候对用户输入的数据进行获取并处理，一般会定义一个函数来实现。这种实现方法的标准技术我们称之为“受控组件”。

受控组件

我们知道在HTML的表单标签如<input>、<textarea>、<select>等这些标签会维持自身的状态，也就是你输入或者选择了某些值之后，标签自己会把这些值记录下来。但是在React中，我们知道构成UI展示的最小单位是元素，对元素进行抽象封装后，可以定义组件，这些可变的值我们是放在组件的状态属性中的，也就是state中的，并且只能通过setState()方法进行更新(除了在构造函数中进行初始化时)。
受控组件，我们最简单的理解，就是UI展示的组件或者元素，其内容或者其状态是受React来控制的，通过React内部组件的状态state来控制。
看下边的代码，input的内容是手NameForm组件控制的，通过state内部value的值来控制：

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  
  handleChange(event) {
    this.setState({value: event.target.value.toUpperCase()});
  }
  
  handleSubmit(event) {
    alert('submit a name:' + this.state.value);
    event.preventDefault();
  }
  
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" value={this.state.value} onChange={this.handleChange} name="name"/>
        <input type="submit" value="submit" />
      </form>
    );
  }
  
}

ReactDOM.render(
  <NameForm />, document.getElementById('root')
);

同理，textarea和select也是一样。
textarea本来是通过子节点来定义内容的，React中也是直接使用value属性来控制。select是通过子元素option的selected来控制的，现在也可以将直接使用value作为select的属性来控制。