react双向绑定

react双向绑定

何为双向绑定？其实就是改变model层能自动改变view层，view层改变
model层也能自动改变。
React已经实现了改变model层能自动改变view层，所以我们要做的就是改
变view层能自动改变model层。

在React当中，有个onChange属性，可以给input绑定事件，当input框里的值发生变化时会触发调用方法。

• 通过事件对象获取值

import React, { Component,createRef } from 'react';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            msg:"你好react"
         }
        // 创建一个dom引用
        this.inpRef = createRef();
    }
   
    changeMsg= (e)=>{
        this.setState({msg:e.target.value})
    }
    render() { 
        return ( <div>
            {/* 受控表单-表单双向绑定 */}
            <p>{this.state.msg}</p>
            <input type="text" value={this.state.msg} onChange={this.changeMsg}/><br />
            <input type="text" value={this.state.msg} onChange={this.changeMsg.bind(this)}/><br />
            <input type="text" value={this.state.msg} onChange={e=>this.changeMsg(e)}/>
            <br />
           
        </div> );
    }
}
 
export default App;

• 通过ref来获取

import React, { Component,createRef } from 'react';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            msg:"你好react"
         }
        // 创建一个dom引用
        this.inpRef = createRef();
    }
    getVal=()=>{
        // 获取表单值
        alert(this.inpRef.current.value);
    }
    changeMsg= (e)=>{
        this.setState({msg:e.target.value})
    }
    render() { 
        return ( <div>
            {/* 受控表单-表单双向绑定 */}
            <p>{this.state.msg}</p>
            <input type="text" value={this.state.msg} onChange={this.changeMsg}/><br />
            <input type="text" value={this.state.msg} onChange={this.changeMsg.bind(this)}/><br />
            <input type="text" value={this.state.msg} onChange={e=>this.changeMsg(e)}/>
            <br />
            {/* 非受控表单 */}
            <input type="text" ref={this.inpRef} />
            <button onClick={this.getVal}>获取值</button>
        </div> );
    }
}
 
export default App;