React 表单、处理受控表单组件、非受控组件

React 表单处理

学习目标： 能够使用受控组件的方式获取文本框

• 使用 React 处理表单一般有两种方法
  1. 受控组件 （推荐）
  2. 非受控组件 （了解）

1. 受控表单组件

什么是受控组件？ input 框自己的状态被 React 组件控制
受控组件就是被 React 的状态控制的组件
例如：将 React 的 state 与 input 框的 value 绑定在一起，由 state 的值来控制表单的值，从而保证单一数据源特性

实现步骤：
以获取文本框的值为例，受控组件的使用步骤如下：

1. 在React组件的 state 中声明一个组件的状态数据
2. 将状态数据设置为 input 标签元素的 `value`` 属性
3. 为 input 添加 change 事件
4. 在事件处理程序中，通过事件对象 e 获取当前文本框的值（用户输入的值）
5. 调用 setState 方法，将文本框的值作为 state 状态的最新值
   代码实现：

//受控组件
import React from 'react'
class InputComponent extends React.Component {
   
   
  state = {
   
   
    message: 'this is message',
  }
  inputChange = (e)