目录
react 中 如何获取表单元素（例如输入框）?
初始代码
class App extends React.Component {
render() {
return (
<div>
<h1>如何获取input中的值</h1>
<p><input type="text" /></p>
<button>点击按钮</button>
</div>
)
}
}有两种思路：
直接找到表单元素进行dom操作 –>
非受控组件
将表单元素值与react的state绑定到一起，把用户的修改同步到state中。让组件受到react的控制–>
受控组件
非受控组件-ref
借助于ref，使用原生DOM的方式来获取表单元素的值
ref的使用格式
步骤
导入方法。
import { createRef } from 'react'
调用createRef方法创建引用，假设名为refDom。
const refDom = createRef()
refDom设置给表单元素的ref属性。
<input ref={refDom}/>
通过refDom.current.value来获取值。
console.log(this.refDom.current.value)
内容
-
受控组件是通过 React 组件的状态来控制表单元素的值
-
非受控组件是通过手动操作 DOM 的方式来控制
-
此时，需要用到一个新的概念：ref
-
ref：用来在 React 中获取 DOM 元素
示例代码
// 1. 导入方法
import { createRef } from 'react'
class Hello extends Component {
// 2. 调用createRef方法创建引用
txtRef = createRef()
handleClick = () => {
// 4. 通过.current.value来获取值
console.log(this.txtRef.current.value)
}
render() {
return (
<div>
<h1>如何获取input中的值-非受控组件-ref</h1>
{/* 3. 设置给表单元素的ref属性 */}
<p><input type="text" ref={this.txtRef}/></p>
<button onClick={handleClick}>获取文本框的值</button>
<div>
)
}
}
受控组件
如何理解受控?
正常情况下，表单元素input是可任意输入内容的，可以理解为input自己维护它的状态（value）
受控组件的思路：
-
在state中定义状态
-
将state中的状态与表单元素的value值绑定到一起，进而通过state中的状态来控制表单元素的值
受控组件：
value值受到了react控制的表单元素
基本步骤
在state中定义状态
对表单元素做两件事
设置value为上面定义的状态
绑定onChange事件，并在回调中通过setState来修改状态值
示例代码
class App extends React.Component {
state = {
// 1. 在state中定义状态
msg: 'hello react'
}
handleChange = (e) => {
this.setState({
msg: e.target.value
})
}
handleClick = （）=> {
console.log(this.state.msg)
}
render() {
return (
<div>
<h1>如何获取input中的值-受控组件</h1>
<p>
{/* 2. 对表单元素做两件事 */}
<input type="text"
value={this.state.msg}
onChange={this.handleChange}
/>
</p>
<button onClick={handleClick}>获取文本框的值</button>
<div>
)
}
}注意
使用受控组件的方式处理表单元素后，状态的值就是表单元素的值。
即：想要操作表单元素的值，只需要操作对应的状态即可
拓展：常见的受控组件
常见的受控组件的在react中的使用
文本框，文本域，下拉框，复选框,单选框
不同类型的表单元素进行受控处理时的格式是不同的：
文本框、文本域、下拉框：value属性 + onChange事件
复选框: checked属性 + onChange事件
单选按钮组：checked属性 + onChange事件
示例代码
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
state = {
username: '',
desc: '',
city: '2',
isSingle: true,
gender: '男'
}
handleName = (e) => {
this.setState({
username: e.target.value
})
}
handleDesc = (e) => {
this.setState({
desc: e.target.value
})
}
handleCity = (e) => {
this.setState({
city: e.target.value
})
}
handleSingle = (e) => {
this.setState({
isSingle: e.target.checked
})
}
hGender = (e) => {
this.setState({
gender: e.target.value
})
}
render () {
return (
<div>
姓名：<input
type="text"
value={this.state.username}
onChange={this.handleName}
/>
<br />
描述：<textarea value={this.state.desc} onChange={this.handleDesc} />
<br />
城市：<select value={this.state.city} onChange={this.handleCity}>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select>
<br />
是否单身：<input
type="checkbox"
checked={this.state.isSingle}
onChange={this.handleSingle}
/>
<br />
<input
type="radio"
name="gender"
value="男"
checked={this.state.gender === '男'}
onChange={this.hGender}
/>{' '}
男
<input
type="radio"
name="gender"
value="女"
checked={this.state.gender === '女'}
onChange={this.hGender}
/>{' '}
女
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'))