React：表单

HTML 的表单元素有自己的内部数据（State），用户在文本框里输入内容，勾选了复选框，这些行为会直接修改表单元素的内部数据。在 React 里，修改数据都要通过 setState 去做。下面这个练习可以帮你理解在 React 组件里的使用表单。

添加一个 HelloForm 组件：

class HelloForm extends Component {
  state = {
    text: ''
  }

  handleChange = (event) => {
    this.setState({
      text: event.target.value
    })
    console.log('输入：', event.target.value)
  }

  handleSubmit = (event) => {
    event.preventDefault()
    console.log('提交：', this.state.text)
  }

  render () {
    return (
      <form onSubmit={ this.handleSubmit }>
        <input type="text"
          value={ this.state.value }
          onChange={ this.handleChange } />
      </form>
    )
  }
}

组件的 render 方法里，有一个表单，里面有个文本框元素：

<form onSubmit={ this.handleSubmit }>
  <input type="text"
    value={ this.state.text }
    onChange={ this.handleChange } />
</form>

在表单元素（form）上，用了 onSubmit 绑定一个提交事件，这个事件用组件的 handleSubmit 来处理。在 text 类型的 input 元素上，绑定了组件里的  text 这个 State，然后又绑定了 change 事件，文本框里发生变化，就会用组件的 handleChange 来处理。

  handleChange = (event) => {
    this.setState({
      text: event.target.value
    })
    console.log('输入：', event.target.value)
  }

组件的 handleChange 是用类的属性初始化器这种形式定义的，这样我们就可以在它里面得到正确的 this，也就是组件实例本身。不然你得明确地绑定 this 。在它里面用了 setState 设置了组件里的 text 的值，对应的值就是事件对象里的 target 下面的 value 的值。这个值就是用户在表单里输入的内容。console.log 输出了这个 value 的值。

  handleSubmit = (event) => {
    event.preventDefault()
    console.log('提交：', this.state.text)
  }

提交表单会执行 handleSubmit ，它里面用了 event.preventDefault 防止表单的默认行为。然后用 console.log 输出了组件里的 text 这个数据的值，这个 text 的值会实时地被 handleChange 更新成用户在文本框里输入的内容。

在 App 组件里，用一下 HelloForm 这个组件：

import React, { Component } from 'react'

class App extends Component {
  state = {
  }

  render () {
    return (
      <div>
        <HelloForm />
      </div>
    )
  }
}

控制