信专业广州网站建设,潍坊网站关键词推广,松原公司做网站,企查查企业信息查询在线React 表单处理
学习目标#xff1a; 能够使用受控组件的方式获取文本框
使用 React 处理表单一般有两种方法 受控组件 #xff08;推荐#xff09;非受控组件 #xff08;了解#xff09;
1. 受控表单组件 什么是受控组件#xff1f; input 框自己的状态被 React 组…React 表单处理
学习目标 能够使用受控组件的方式获取文本框
使用 React 处理表单一般有两种方法 受控组件 推荐非受控组件 了解
1. 受控表单组件 什么是受控组件 input 框自己的状态被 React 组件控制 受控组件就是被 React 的状态控制的组件 例如将 React 的 state 与 input 框的 value 绑定在一起由 state 的值来控制表单的值从而保证单一数据源特性 实现步骤 以获取文本框的值为例受控组件的使用步骤如下
在React组件的 state 中声明一个组件的状态数据将状态数据设置为 input 标签元素的 value 属性为 input 添加 change 事件在事件处理程序中通过事件对象 e 获取当前文本框的值用户输入的值调用 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 (divinputtypetestvalue{this.state.message}onChange{this.inputChange}/{this.state.message}/div)}
}
function App() {return (divInputComponent //div)
}
export default App2.非受控组件 声明是非受控组件 非受控组件就是通过手动操作 Dom 的方式获取文本框的值文本框的状态不受 React 组件的 state 中的状态控制直接通过原生 Dom 获取输入框的值 实现步骤
导入createRef函数调用 createRef 函数创建一个 ref 对象存储到名为msgRef的实例属性中为 input 添加 ref 属性值位 msgRef在按钮的事件处理程序中通过 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 typetest ref{this.msgRef} /button onClick{this.changeHandler}click/button/)}
}
function App() {return (divInputComponent //div)
}
export default App
