受控组件
什么是受控组件
- 受控组件通常指的是表单，因为表单是可输入的，必须有对应的状态与之绑定
- 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'))
不同域数据的获取方式
- 每个域都要将 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'))
