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 } = this.state;
        return (
            <div>
                使用者名稱:
                <input type="text" value={form.username} onChange={this.toChange.bind(this, 'username')} />
               
            </div>
        );
    }
}

用標籤的value屬性將state的中的資料繫結到標籤上，並繫結一個onChange方法，用該方法監聽input中的資料，當文字框的內的資料改變時，同時改變state中的資料。

二、繫結列表資料

如果要繫結列表資料，則要麻煩一些，需要進行一些陣列的操作。

class Form extends Component {
    state = {
        //表單資料物件
        form: {
            hobby: ['basketball'],
        },

        //所有愛好
        hobbies: [{
            id: 1,
            name: '籃球',
            value: 'basketball'
        },
        {
            id: 2,
            name: '足球',
            value: 'soccer'
        },
        {
            id: 3,
            name: '跑步',
            value: 'running'
        }
        ],

    toChangeList = (e) => {
        let value = e.target.value;
        // console.log(e.target.value)
        //判斷form.hobby有沒有這個value
        let arr = [...this.state.form.hobby];
        if (arr.includes(value)) {
            let index = arr.indexOf(value);
            arr.splice(index, 1)
        }
        else {
            arr.push(value)
        }
        this.setState({
            form: {
                ...this.state.form,
                hobby: arr
            }
        })
    }

    render() {
        const { hobbies } = this.state;
        return (
            <div>
                {JSON.stringify(this.state.form)}
                愛好:
                {
                    hobbies.map((item, index) => {
                        return (
                            <label htmlFor="">
                                <input type="checkbox" value={item.value} key={index} checked={form.hobby.includes(item.value)} onChange={this.toChangeList.bind(this)} /> {item.name}
                            </label>)
                    })
                }
            </div>
        );
    }
}

遍歷渲染出列表內的每一項，給每一項繫結方法和value，在checked屬性中判斷是否選定這個項，在繫結的方法中，則需要判斷state的列表中是否有這個項，如果有則，刪除這個項，如果沒有，則向state的列表中新增這個項。