杭州知名的网站制作策略海外域名

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) => {this.setState({ message: e.target.value })}render() {return (<div><inputtype="test"value={this.state.message}onChange={this.inputChange}/>{this.state.message}</div>)}
}
function App() {return (<div><InputComponent /></div>)
}
export default App

2.非受控组件

声明是非受控组件？
非受控组件就是通过手动操作 Dom 的方式获取文本框的值，文本框的状态不受 React 组件的 state 中的状态控制，直接通过原生 Dom 获取输入框的值

实现步骤：

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

import React, { createRef } from 'react'
class InputComponent extends React.Component {// 使用createRef产生一个存放Dom的对象容器msgRef = createRef()changeHandler = () => {console.log(this.msgRef.current.value)}render() {return (<><input type="test" ref={this.msgRef} /><button onClick={this.changeHandler}>click</button></>)}
}
function App() {return (<div><InputComponent /></div>)
}
export default App