Vue，和React，实现的双向数据绑定效果

假设有这样的需求，用Vue和React，分别是怎么实现的呢？

双向数据绑定.gif

Vue的实现方法：

<template>
  <div class="test">
    <label
      class="hobbies"
      :for="hobby.name"
      v-for="hobby in hobbies"
      :key="hobby.name"
    >
      <input
        type="checkbox"
        :id="hobby.name"
        :value="hobby.name" // 绑定好每个项的value，让每个项都独立起来
        v-model="picked"  // 双向绑定数组，每checked一项，数组就多一项
      />
      {{ hobby.value }}
    </label>
    <button @click="myHobbies">查看我的爱好</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      picked: [],  // 定义一个空数组，用来装那些选中的项
      hobbies: [
        { name: "sing", value: "唱" },
        {
          name: "dance",
          value: "跳"
        },
        {
          name: "rap",
          value: "说唱"
        },
        {
          name: "basketball",
          value: "篮球"
        }
      ]
    };
  },
  methods: {
    myHobbies() {
      console.log(this.picked);
    }
  }
};
</script>

Vue的实现方法是利用v-model，就能进行双向数据绑定，然后绑定好每个checkbox 的value，让它们独立起来。利用v-model就能往数组增删项。

React 的实现方法：

import React from 'react';
class Test extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            picked: [],  //定义空数组，用来装那些选中项
            hobbies: [
                { name: "sing", value: "唱" },
                {
                    name: "dance",
                    value: "跳"
                },
                {
                    name: "rap",
                    value: "说唱"
                },
                {
                    name: "basketball",
                    value: "篮球"
                }
            ]
        }
    }

    handleChange = (e) => {
        // console.log(e.target.value)
        // console.log(this)
        if (this.state.picked.includes(e.target.value)) {  // 如果点击的那一项，在picked 中是存在的，说明要进行取消选择的操作。
            this.setState({
                picked: this.state.picked.filter(item => item != e.target.value)，将点击的那一项踢掉。（同样是不能直接改变原数组）
            });
        } else {
            this.setState({
                picked: [...this.state.picked, e.target.value]  // 将点击的哪一项加进来，（注意不能直接修改 this.state的数据)
            })
        }
    }

    getMyHobbies = () => {
        console.log(this.state.picked)
    }

    render() {
        const myHobbies = (
            this.state.hobbies.map(hobby => {
                return (
                    <label htmlFor={hobby.name} key={hobby.name}>
                        <input type="checkbox"
                            checked={
                                this.state.picked.includes(hobby.name)
                            } // 利用checked属性去判断状态是否被选中
                            onChange={this.handleChange} // 手动触发onChange事件
                            value={hobby.name}  // 绑定好每个项的value
                        />
                        {hobby.value}
                    </label>
                )
            })
        );

        return (
            <div>
                {myHobbies}
                <button onClick={this.getMyHobbies}>查看我的爱好</button>
            </div>
        )
    }
}

export default Test;

React的实现方法则是通过 checked 去监听事件选中的状态，在利用onChange去改变状态。改变状态的原理是利用数组的map方法，进行增删。

总结

由此可见，Vue的操作，更像是在驾驶自动挡汽车，感觉很魔法。而React的操作更像是在驾驶手动挡汽车，很多都要自己来干