[JavaScript知识库]React双向数据绑定原理---受控组件

受控组件：React将state与表单元素的值value绑定到一起

代码：(多表单组件单一写法)
每个要绑定的元素都要写一遍onChange事件，比较繁琐

import React from 'react';
// class类组件（有状态组件）
class World extends React.Component {
    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.value
        const name = e.target.name
        this.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)