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 (
<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 获取输入框的值
实现步骤:
- 导入
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 type="test" ref={this.msgRef} />
<button onClick={this.changeHandler}>click</button>
</>
)
}
}
function App() {
return (
<div>
<InputComponent />
</div>
)
}
export default App
原文地址:https://blog.csdn.net/weixin_53761834/article/details/135854261
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!