目录
表单处理
说明:
能够使用受控组件的方式获取文本框的值
使用React处理表单元素,一般有俩种方式:
-
受控组件 (推荐使用)
-
非受控组件 (了解)
1. 受控表单组件
什么是受控组件?
input框自己的状态被React组件状态控制
React组件的状态的地方是在state中,input表单元素也有自己的状态是在value中,React将state与表单元素的值(value)绑定到一起,由state的值来控制表单元素的值,从而保证单一数据源特性
实现步骤
以获取文本框的值为例,受控组件的使用步骤如下:
-
在组件的state中声明一个组件的状态数据
-
将状态数据设置为input标签元素的value属性的值
-
为input添加change事件,在事件处理程序中,通过事件对象e获取到当前文本框的值(
即用户当前输入的值
) -
调用setState方法,将文本框的值作为state状态的最新值
代码
import React from 'react'
class InputComponent extends React.Component {
// 声明组件状态
state = {
message: 'this is message',
}
// 声明事件回调函数
changeHandler = (e) => {
this.setState({ message: e.target.value })
}
render () {
return (
<div>
{/* 绑定value 绑定事件*/}
<input value={this.state.message} onChange={this.changeHandler} />
</div>
)
}
}
function App () {
return (
<div className="App">
<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 (
<div>
{/* ref绑定 获取真实dom */}
<input ref={this.msgRef} />
<button onClick={this.changeHandler}>click</button>
</div>
)
}
}
function App () {
return (
<div className="App">
<InputComponent />
</div>
)
}
export default App