React中如何實現雙向數據綁定?

01-13

React是單向數據流的，那能不能實現雙向數據綁定呢?能實現的話怎麼實現?

不建議

如果堅持，請看Two-Way Binding Helpers

import React, {Component} from "react"


class Hello extends Component {

    constructor(props) {

        super(props)

        this.state = {

            value: ""

        }

    }
    handleInput = _event =&> {

        let event = _event

        let elem = event.target

        let value = elem.value

        if(elem.attributes.twoWay != null){

            let attr = elem.attributes.twoWay.value

            this.setState(state =&> state[attr] = value)

        }

    }
    render() {

        return (

            &

                &

                &{this.state.value}&
            &
        )

    }

}

export default Hello;

我們把state這個名字換一下：

import React, {Component} from "react"


class Hello extends Component {

    constructor(props) {

        super(props)

        this.viewModel = {

            value: ""

        }

    }
    handleInput = _event =&> {

        let event = _event

        let elem = event.target

        let value = elem.value

        if(elem.attributes.twoWay != null){

            let attr = elem.dataset.twoway.value

            this.setViewModel(viewModel =&> viewModel[attr] = value)

        }

    }
    render() {

        return (

            &

                &

                &{this.state.value}&
            &
        )

    }

}

export default Hello;

而常見的MVVM是這麼實現的：

let vm = { _data: "", get data() { return this._data }, set data(value) { this._data = value notify() // 通知View層更新數據 } }

MVVM雙向綁定工業界用了十年，現在跳出來一群人說雙向綁定不好，狀態容易亂，我們要單向數據流云云，然後大喊xx才雙向綁定

且不說這些人明白不明白MVVM的精髓，MVVM雙向綁定的重量級應用比這些人打過的嘴炮都多，到底誰才是xx？

簡單實現react雙向數據綁定 · Issue #3 · lhang/blog

在看Vue.js文檔中的想法，歡迎討論

http://reactjs.cn/react/docs/thinking-in-react.html

最後面的添加反向數據流