受控组件：React将state与表单元素的值value绑定到一起
代码：(多表单组件单一写法)
每个要绑定的元素都要写一遍onChange事件，比较繁琐
import React from 'react';// class类组件（有状态组件）class World extends ponent {state = {text: '',//input绑定的值textarea: '',//textarea绑定的值city: 'bj',//多选框的的值checked: false//复选框}iptHandle = (e) => {this.setState({text: e.target.value})}areaChange = e => {this.setState({textarea: e.target.value})}cityChange = e => {this.setState({city: e.target.value})}checkChange = e => {console.log(e);this.setState({checked: e.target.checked})console.log(this.state.checked);}render() {return (<div><input type='text' value={this.state.text} onChange={this.iptHandle} /><br /><textarea value={this.state.text} onChange={this.areaChange} /><br /><select value={this.state.city} onChange={this.cityChange}><option value='sh'>上海</option><option value='bj'>北京</option></select><input type='checkbox' checked={this.state.checked} onChange={this.checkChange} /></div>)}}export default World
优化：
1.给表单元素添加name属性，名称与state相同；
2，根据表单元素获取对应的值；
3.在chang事件处理程序中通过[name]来修改对应的state
handelChange = (e) => {const value = e.target.type === 'checkbox' ? e.target.checked : e.target.valueconst name = e.target.namethis.setState({[name]: value})}render() {return (<div><input name='text' type='text' value={this.state.text} onChange={this.handelChange } /><input name='textarea' type='checkbox' checked={this.state.checked} onChange={this.handelChange } /></div>)}//注意name的值要与state绑定的值相同
非受控组件：通过ref，使用元素DOM方式来获取表单元素的值。
使用步骤：
1，调用React.createRef()方法创建一个ref对象
constructor() {super()this.textRef=React.createRef()}}
2,将创建好的Ref对象添加到文本框中
<input type='text' ref={this.textRef} />
3.通过ref对象获取到文本框的值,current不能掉
console.log(this.textRef.current.value)
