react学习-表单处理（四）

xiaoxiao

2022 年 06 月 20 日

1820 次浏览

1 条评论

1423字数

react 前端

# react学习-表单处理（四）

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

1. 受控组件 （推荐使用）

2. 非受控组件

## 1. 受控表单组件

> 什么是受控组件？  `input框自己的状态被React组件状态控制`

**实现步骤**

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

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

4. 调用 setState 方法，将文本框的值作为 state 状态的最新值

代码：

```js
import React from "react"

class Test extends React.Component {
  state = {
    message: 'this is message'
  }

inputChange = (e) => {
    this.setState({
      message: e.target.value
    })
  }

render () {
    return (
      <input
        type="text"
        value={this.state.message}
        onChange={this.inputChange} />
    )
  }
}

function App () {
  return (
    <div className="App">
      <Test />
    </div>
  )
}

export default App
```

类似 v-model 底层写法

## 2. 非受控表单组件

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

**实现步骤**

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

代码:

```js
import React, { createRef } from "react"

class Test extends React.Component {

msgRef = createRef()

getValue = () => {
    console.log(this.msgRef.current.value)
  }

render () {
    return (
      <>
        <input
          type="text"
          ref={this.msgRef}
        />
        <button onClick={this.getValue}>button</button>
      </>
    )
  }
}

function App () {
  return (
    <div className="App">
      <Test />
    </div>
  )
}

export default App

```