在React中实现数据的双向绑定

1.将数据渲染到页面中

1. 创建一个.jsx文件

import React from 'react'
export default class MyInput extends React.Component{
    constructor(){
        super()
        this.state={
            msg:'123'
        }
    }
    render(){
        return <div>
                <input type="text" style={{width:'100%'}} value={this.state.msg}/>
            </div>
    }
}

2. 导入.jsx文件，并渲染到页面上

import React from 'react'
import ReactDOM from 'react-dom'

import MyInput from '.jsx文件路径'

ReactDOM.render(
    <div>
        <MyInput></MyInput>
    </div>
    ,document.getElementById('app')
)

这时，this.state.msg只是单向的从MyInput组件实例的this.state渲染到页面中，页面中不能进行修改

2.从页面上获取数据，并同步到this.state中

1. 通过箭头函数的参数获取数据
   .jsx文件

import React from 'react'
export default class MyInput extends React.Component{
    constructor(){
        super()
        this.state={
            msg:'123'
        }
    }
    render(){
        return <div>
                <input type="text" style={{width:'100%'}} value={this.state.msg} onChange={(e) =>this.inputChange(e)}/>
            </div>
    }
    inputChange(e){
		this.setState({
            msg:e.target.value
        })
	}
}

箭头函数的参数是一个event,是触发这个函数的元素，而我们想得到的标签就在这个元素下的target中
2. 通过ref获取数据
.jsx文件

import React from 'react'
export default class MyInput extends React.Component{
    constructor(){
        super()
        this.state={
            msg:'123'
        }
    }
    render(){
        return <div>
                <input type="text" style={{width:'100%'}} value={this.state.msg} onChange={()=>this.inputChange()} ref="txt"/>
            </div>
    }
    inputChange(e){
		this.setState({
            msg:this.refs.txt.value
        })
	}

加了ref的元素，相当于加了一个id，react内部有一个refs对象存放了这些加了ref的元素的指向

总结：
react会自动的做从实例中的数据向页面中进行渲染，但不会将页面中的数据的修改同步到实例的数据中，想要实现数据的双向绑定，就需要我们来做从页面到实例中的数据这个方向的处理。还是vue方便