react学习-表单处理(四)
使用React处理表单元素,一般有俩种方式:
- 受控组件 (推荐使用)
- 非受控组件
1. 受控表单组件
什么是受控组件? input框自己的状态被React组件状态控制
实现步骤
以获取文本框的值为例,受控组件的使用步骤如下:
- 在组件的 state 中声明一个组件的状态数据
- 将状态数据设置为 input 标签元素的 value 属性的值
- 为 input 添加 change 事件,在事件处理程序中,通过事件对象 e 获取到当前文本框的值(
即用户当前输入的值
) - 调用 setState 方法,将文本框的值作为 state 状态的最新值
代码:
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获取输入框的值
实现步骤
- 导入
createRef
函数 - 调用 createRef 函数,创建一个 ref 对象,存储到名为
msgRef
的实例属性中 - 为 input 添加 ref 属性,值为
msgRef
- 在按钮的事件处理程序中,通过
msgRef.current
即可拿到 input 对应的 dom 元素,而其中msgRef.current.value
拿到的就是文本 框的值
代码:
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