React 受控组件之表单处理

假期在家，继续学习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'))