标签：参数 第一步 count span state UNC val height NPU
双向绑定有三步，第一步，触发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;
标签：参数 第一步 count span state UNC val height NPU
原文地址：https://www.cnblogs.com/qingshanyici/p/10146944.html
