React学习笔记之双向数据绑定

React学习笔记之双向数据绑定

前言

有过vue使用经验的开发者对vue的数据绑定一定不会陌生，vue的数据可以简单地通过v-model进行绑定。

而在react中，没有提供v-model这样的简单的方法，而是需要在标签上绑定value值以及一个方法

---

一、绑定基本数据类型

绑定基本数据类型可以通过标签的value属性以及一个方法监听数据。

class Form extends Component {
   
    state = {
   
        //表单数据对象
        form: {
   
            username: 'zhangsan',
        },
    }
    toChange = (key, e) => {
   
        let value = e.target.value;
        this.setState({
   
            form: {
   
                ...this.state.form,
                [key]: value
            }
        })
    }
    render() {
   
        const {
    form }