React实现数据双向绑定

React手动实现数据双向绑定

• 和vue 相比 react 并没有提供向 v-model 这样的指令来实现文本框的数据流双向绑定，因为react的设计思路就是单向数据流，所以我们需要借助 onChange 和 setState 来实现一个双向的数据流

• 实现思路大致如下：↓
  

• 如这样一个 input
  <input ref="txt" onChange={ (e)=>this.txtChange(e) } type="text" style={ {width:'100%'} } value={this.state.mydata} />

//监控文本框的change事件
    txtChange = (e)=>{
   
        // console.log(this.refs.txt.value)
        // console.log(e)
        const newVal = e.target.value
        this.setState({
   
            mydata: newVal
        })
    }

---

全部代码块：

import React from 'react'
export default class BindEvent extends React.Component