受控组件
什么是受控组件
- 受控组件通常指的是表单,因为表单是可输入的,必须有对应的状态与之绑定
- React 将
state
与表单的value
值绑定到一起 - 给表单元素绑定
change
事件,将表单元素的值设置为state的值,接收表单值变化
核心代码
第一步:在state中设置数据
state = {
username: 'admin'
}
第二步:表单域中将 state中的数据与value绑定
<input
type="text"
value={
this.state.username}
/>
此时,value与username绑定,所以文本框中默认写入 admin
第三步:给表单绑定onChange
事件
<input
type="text"
value={
this.state.username}
onChange={
this.handleText}
/>
第四步:事件函数中调用 setState 将数据进行保存
handleText = (e) => {
this.setState({
username: e.target.value
})
}
参数: e 是事件对象
(对e
不了解的同学,指路==>事件处理)
e.target
中保存了标签的 DOM 对象
e.target.value
保存了input中的value值
e.target.name
保存了input的name值
效果:
案例
获取用户名文本框中的内容,并打印出来
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
state = {
account: ''
}
checkLogin = () => {
console.log(this.state)
}
// 文本框内容变化时数据的处理函数
handleAccount = e => {
console.log(e)
this.setState({
account: e.target.value})
}
render () {
return (
<div>
账号: <input type="text" value={
this.state.account} onChange={
this.handleAccount} /><br />
<button onClick={
this.checkLogin}>登录</button>
</div>
)
}
}
ReactDOM.render(<App />, document.querySelector('#app'))
扫描二维码关注公众号,回复:
12482114 查看本文章
不同域数据的获取方式
- 每个域都要将 value 和 state 中对应的属性绑定
- 每个域都要绑定 onChange 事件
举例: 点击登录按钮,将文本框中的值输出到终端
给input、select、textarea表单域分别绑定onChange事件
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
state = {
account: '',
city: '',
desc: ''
}
handleAccount = e => {
this.setState({
account: e.target.value
})
}
handleCity = e => {
this.setState({
city: e.target.value
})
}
handleDesc = e => {
this.setState({
desc: e.target.value
})
}
submit = () => {
console.log(this.state)
}
render () {
return (
<div>
账号: <input type="text" value={
this.account} onChange={
this.handleAccount} /><br />
城市: <select value={
this.city} onChange={
this.handleCity}>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="sz">深圳</option>
<option value="xa">西安</option>
</select><br />
描述: <textarea value={
this.desc} onChange={
this.handleDesc}></textarea><br />
<button onClick={
this.submit}>登录</button>
</div>
)
}
}
ReactDOM.render(<App />, document.querySelector('#app'))
最初效果:
当我们输入数据之后,根据每个域的属性绑定,点击登录按钮,终端会显示出我们输入的数据
合并处理
核心: e.target
e.target.value
: 保存了标签中的value值e.target.name
:保存了标签中的name值
每个域中name属性绑定 state 中对应的属性, onChange指定一个函数统一处理
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
state = {
account: '',
city: '',
desc: ''
}
handleForm = e => {
const {
name, value} = e.target
this.setState({
[name]: value
})
}
submit = () => {
console.log(this.state)
}
render () {
return (
<div>
账号: <input name="account" type="text" value={
this.account} onChange={
this.handleForm} /><br />
城市: <select name="city" value={
this.city} onChange={
this.handleForm}>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="sz">深圳</option>
<option value="xa">西安</option>
</select><br />
描述: <textarea name="desc" value={
this.desc} onChange={
this.handleForm}></textarea><br />
<button onClick={
this.submit}>登录</button>
</div>
)
}
}
ReactDOM.render(<App />, document.querySelector('#app'))