react双向事件的绑定

Posted 2021-01-28 qingshanyici

双向绑定有三步，第一步，触发onChange事件，第二步，拿到input里的值，第三步，使用setState将拿到的值传回到state中。

如何拿到input里的值，可以有两种方法，第一种方法是参数e，由于每当触发一个事件的同时，都会有一个参数e产生，因此，onChange={(e)=>this.txtChange(e)},然后在e.target.value中获取事件触发后的值。

第二种方法是通过react中的refs获取文本框中的值，this.refs.自己定的名字.value，该方法获取文本框中的值。

 

import React, { Component } from ‘react‘;
class New extends Component {
    constructor(props){
        super(props)
        this.state={
            Name:‘王一‘,
            Acount:‘第二种获取数据的方法‘
        }
    }
    change=(e)=>{
                // console.log(‘onChange事件就直接引用this就可以了，‘+e.target.value)
                const data=e.target.value;
                this.setState({
                        Name:data,  },function(){
                            console.log(this.state.Name);
                        }                    
                )        
    }
    changeTwo=()=>{
        console.log(this.refs.txt2.value)
    }


    render(){
        return<div>
            <h3>文本框的双向绑定</h3> 
            <h4>this.state.Name</h4>           
            <input type=‘text‘ style={{width:‘60%‘,height:‘50%‘}} 
            value={this.state.Name} 
            onChange={this.change}/>
            <input type=‘text‘ style={{width:‘60%‘,height:‘50%‘}} 
            value={this.state.Acount} 
            onChange={this.changeTwo}
            ref=‘txt2‘/>          
        </div>
    }
}
export default New;