假期在家，继续学习React知识，记录下来，方便查看。
表单是前端开发常见的形式
受控组件
在HTML中的表单元素是可以输入，有其可变的状态，而在React中可变状态通常保存在state中，并且只能通过setState方法来修改。
React 将state与表单元素值value绑定到一起，由state值来控制表单元素的值。
1）控制表单元素的来源，在state 中添加一个状态，作为表单元素的value；
2）控制表单元素值的变化，给表单元素绑定change事件，将表单元素的值设置为 state 的值。
表单控件主要包含：文本框、富文本框、下拉框和复选框等。
处理步骤
第一步、在state中定义变量；
第二步、给控件设置value属性或checked属性；
第三步、绑定change事件，改变变量对应的值
文本框、富文本框、下拉框和复选框 四种表单组件处理程序如下所示。
// 函数绑定事件
class APP extends React.Component{
// 定义sate
state = {
text: '',
content: '',
city: '',
isChecked: false
}
// 处理文本框
handleChange = e => {
this.setState({
text: e.target.value
})
}
// 处理富文本框
handleContent = e => {
this.setState({
content: e.target.value
})
}
// 处理下拉框变化
handleCity = e => {
this.setState({
city: e.target.value
})
}
// 处理复选框变化
handleCity = e => {
this.setState({
isChecked: e.target.checked
})
}
render() {
return (
<div>
// 文本框
<input type="text" value={
this.state.text} onChange={
this.handleChange} />
<br>
// 富文本框
<testarea value={
this.state.content} onChange={
this.handleContent} />
<br>
// 下拉框
<select value={
this.state.city} onChange={
this.handleCity}>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
</select>
<br>
// 复选框
<input type="checkbox" checked={
this.state.isChecked} onChange={
this.handleChecked}/>
</div>
)
}
}
渲染函数组件
ReactDOM.render(<APP />,document.getElementById('root'))
上面四种组件各自处理，代码比较冗余，可以进行以下优化
处理步骤
第一步、给表单元素添加name属性，名称与state相同；
第二步、根据表单元素类型获取对应值；
第三步、在 change 事件处理程序中通过 [name] 来修改对应的state。
// 函数绑定事件
class APP extends React.Component{
// 定义sate
state = {
text: '',
content: '',
city: '',
isChecked: false
}
// 根据类型获取值
handleForm = e => {
// 获取当前DOM对象
const target = e.target
// 根据类型获取值
const value = target.type === 'checkbox'
? target.checked : target.value
// 获取name
const name = target.name
this.setState({
[name]: value
})
}
render() {
return (
<div>
// 文本框
<input type="text" name="text" value={
this.state.text} onChange={
this.handleForm } />
<br>
// 富文本框
<testarea name="content" value={
this.state.content} onChange={
this.handleForm} />
<br>
// 下拉框
<select name="city" value={
this.state.city} onChange={
this.handleForm}>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
</select>
<br>
// 复选框
<input name="isChecked" type="checkbox" checked={
this.state.isChecked} onChange={
this.handleForm}/>
</div>
)
}
}
渲染函数组件
ReactDOM.render(<APP />,document.getElementById('root'))