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

时间：2024-01-26 20:12:06

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>
        <input
          type="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

相关文章