React中双向数据绑定基本原理

在Vue.js中在@input等事件和v-bind上扩展了v-model实现双向数据绑定,在React中也是一样的原理

import React, { Component } from 'react'
//React的双向数据绑定

export default class app4 extends Component {
    constructor(props){
        super(props)
        this.state = { /* 01-定义默认显示的数据*/
            txt:'文字'
        }
    }
    change(e){/* 04-使用this.setState把txt值修改为事件对象里面的target.value,实现双向数据绑定 */
        this.setState({
            txt:e.target.value
        })
    }
    render() {
        return (
            <div>
                <input type="text" value={this.state.txt} onChange={this.change.bind(this)}/>{/* 03- 绑定input中的value值,在触发onchange事件时通过传入事件对象修改this.state的txt值  */}
                <p>{this.state.txt}</p> {/* 02-在p标签上绑定this.state的txt值 */}
            </div>
        )
    }
}