react中如何实现双向数据绑定

学过vue的小伙伴都知道，在vue中可以通过v-model实现数据的双向绑定。而react的设计思路是单向数据流，我们该如何在react中实现双向数据绑定呢？我们先整理一下具体思路。

实现效果：

一个input标签、在state中设置一个状态。

改变input标签内容，状态中的值会改变。改变状态中的值，input标签中内容会改变。

思路：

1、给input标签绑定一个onchange改变事件

2、通过获取事件目标中value值，拿到最新的input标签中的内容

3、通过this.setState()，把最新的值给到state中的状态

代码如下：

import React, { Component } from 'react'

export default class App extends Component {
    //接收input中的value值
    state = { inputValue: '' }

    //输入框内容改变事件
    inputChange(event){
        // console.log(event.target.value);
        this.setState({
            inputValue: event.target.value
        })
    }    

    render() {
        //解构出inputValue，方便书写
        let { inputValue } = this.state
        return (
            <div>
                 <input value={inputValue} onChange={this.inputChange.bind(this)}>            
                 </input>
                 { inputValue }
            </div>
        )
    }
}