/**
* 受控组件:让React中的 state 成为表单元素的唯一数据源。
* 核心:value + onChange事件,复选框是checked
*/
import React, { Component } from 'react'
export default class App extends Component {
state = {
username: '', // 用户名
txt: '',
course: 'JavaScript', // 课程
sex: "", // 性别
checked: false // 复选框的状态
}
// 多表单元素的受控
handleChange(ev) {
// 获取当前元素
const target = ev.target;
// 根据type值来判断当前元素是否是复选框
let value = target.type === 'checkbox' ? 'checked' : 'value'
// 在es6中,对象的key可以是一个变量
this.setState({
[target.name]: target[value]
})
}
render() {
const { username, txt, course, checked } = this.state
return (
<div>
{/* 单选框的受控 */}
<input type="text" name="username" value={ username } onChange={ ev => this.handleChange(ev) } />
<div>{ username }</div>
<hr />
{/* 多行文本框的受控 */}
<textarea name="txt" value={ txt } onChange={ ev => this.handleChange(ev) }></textarea>
<hr />
{/* 下拉框的受控 */}
<select name="course" value={ course } onChange={ ev => this.handleChange(ev) }>
<option value="JavaScript">JavaScript</option>
<option value="Vue">Vue</option>
<option value="React">React</option>
</select>
<hr />
{/* 单选按钮 */}
<label htmlFor="male">男:</label>
<input id="male" type="radio" value="male" name="sex" onChange={ ev => this.handleChange(ev) } />
<label htmlFor="female">女:</label>
<input id="female" type="radio" value="female" name="sex" onChange={ ev => this.handleChange(ev) } />
<hr />
{/* 复选框 */}
<input name="checked" type="checkbox" checked={ checked } onChange={ ev => this.handleChange(ev) } />
</div>
)
}
}
表单元素受控
/**
* 受控组件:让React中的 state 成为表单元素的唯一数据源。
* 核心:value + onChange事件,复选框是checked
*/
import React, { Component } from 'react'
export default class App extends Component {
state = {
username: '', // 用户名
txt: '',
course: 'JavaScript', // 课程
sex: "", // 性别
checked: false, // 复选框的状态
likes: []
}
// 选择爱好
chooseLikes(value) {
console.log(value);
// 把之前的数组复制一份
const copyLikes = [ ...this.state.likes ];
// 从数组中查询当前选择的元素的下标
const idx = copyLikes.indexOf(value);
// 判断当前元素在数组中是否存在
if(idx === -1) { // 当前元素在数组中不存在
// 将当前元素添加到数组中
copyLikes.push(value);
} else {
// 如果存在就删除
copyLikes.splice(idx, 1)
}
// 更新视图
this.setState({
likes: copyLikes
})
}
render() {
const { username, txt, course, checked } = this.state
return (
<div>
{/* 单选框的受控 */}
<input type="text" value={ username } onChange={ ev => this.setState({
username: ev.target.value
})} />
<div>{ username }</div>
<hr />
{/* 多行文本框的受控 */}
<textarea value={ txt } onChange={ ev => this.setState({
txt: ev.target.value
})}></textarea>
<hr />
{/* 下拉框的受控 */}
<select value={ course } onChange={ ev => this.setState({
course: ev.target.value
})}>
<option value="JavaScript">JavaScript</option>
<option value="Vue">Vue</option>
<option value="React">React</option>
</select>
<hr />
{/* 单选按钮 */}
<label htmlFor="male">男:</label>
<input id="male" type="radio" value="male" name="sex" onChange={ ev => this.setState({
sex: ev.target.value
})} />
<label htmlFor="female">女:</label>
<input id="female" type="radio" value="female" name="sex" onChange={ ev => this.setState({
sex: ev.target.value
})} />
<hr />
{/* 复选框 */}
<input type="checkbox" checked={ checked } onChange={ ev => this.setState({
checked: ev.target.checked
})} />
<hr />
{/* 复选框二 */}
篮球:<input type="checkbox" value="篮球" onChange={ ev => this.chooseLikes(ev.target.value) } />
足球:<input type="checkbox" value="足球" onChange={ ev => this.chooseLikes(ev.target.value) } />
羽毛球:<input type="checkbox" value="羽毛球" onChange={ ev => this.chooseLikes(ev.target.value) } />
</div>
)
}
}