React双向数据绑定

前言：React中的双向绑定是没有提供的，相比vue需要手动写，不过也比较简单，下面看代码示例。

什么是双向数据绑定？
PS：model改变影响了view,view改变则反过来影响model.**

示例代码：

import React from "react";

class Model extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            str: '123'   //默认的数据
        }
    }

    changeData = (e) => {   //键盘监听事件
        this.setState({ //监听input的value的值，保存给str;当input输入信息则触发的onChange监听事件
            str: e.target.value
        })
    }

    render() {
        return (
            <div>
                <h3>双向绑定</h3>
                <input value={this.state.str} onChange={this.changeData} />
                <p>{this.state.str}</p>
            </div>
        )
    }
}

export default Model;