React表单组件

 一、表单组件

使用React处理表单元素，一般会有两种方式：

1. 受控组件（推荐使用）
2. 非受控组件（了解）

受控组件

概念：就是可以被React状态控制的组件

React组件状态的地方是在state中，input表单元素也有自己的状态是在value中，React将state与表单元素的值（value）绑定到一起，由state的值来控制表单元素的值，从而保证单一数据源的特性

实现步骤

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

非受控组件

定义：非受控组件就是手动操作dom的方式获取文本框的值，文本框的状态不受react组件的state中状态的控制，直接通过原生dom获取输入框的值

实现步骤：

1. 导入createRef函数
2. 调用createRef函数，创建一个ref对象，存储到名为msgRef的实例属性中
3. 为input添加ref属性，值为msgRef
4. 在按钮的事件处理程序中，通过msgRef.current即可拿到input对应的都没元素，而其中msgRef.current.value拿到的就是文本框的值

// 导入方法值
import React, { createRef } from 'react'
class Test extends React.Component {
  //  1.这个实例属性是可以自定义的，语义化即可
  msgRef = createRef()

  getValue = () => {
    console.log(this.msgRef.current.value)
  }
  // 2.给input框的value属性绑定react state
  // 3.给input框绑定一个change事件为了拿到当前值
  render() {
    return (
      <>
        <input type="text" ref={this.msgRef} />
        <button onClick={this.getValue}>点击获取输入框的值</button>
      </>
    )
  }
}

function App() {
  return (
    <div>
      {/* 绑定事件 */}
      <Test></Test>
    </div>
  )
}
export default App