获取表单的值1
1. 监听表单的改变事件 onChange
2. 在改变的事件里面获取表单输入的值 event.target.value
3. 把表单输入的值赋值给username this.setState({})
4. 点击按钮的时候获取state里面的usename */ this.state.name
this.state={
username:'', // 定义usename
}
// 监听input框变化
inputChange = (event)=>{
console.log(event.target.value) // 通过target获取dom节点
this.setState({
username:event.target.value,// 结构函数的username赋值dom节点val
})
}
getInput =()=>{
alert(this.state.username)
}
<input type="text" onChange = {this.inputChange} /> <button onClick= {this.getInput}>获取数据</button>
<p>{this.state.username}</p> // 此处可形成双向数据绑定方法。
获取表单的值2
1. 监听表单的改变事件 onChange
2. 在改变的事件里面获取表单输入的值 ref获取
3. 把表单输入的值赋值给name this.setState({})
4. 点击按钮的时候获取state里面的name this.state.name
this.state = {
name:'小刚刚'
};
inputChange =()=>{
let val = this.refs.input_val.value;
this.setState({
name:val,
})
}
getinput=()=>{
console.log(this.state.name)
}
<input ref='input_val' type="text" onChange={this.inputChange} />
<button onClick ={this.getinput}>第二种获取表单数据</button>
双向数据绑定
this.state = {
cty:''
};
inputModel=() =>{
let model = this.refs.model.value;
this.setState({
cty:model
})
}
<h2>双向数据绑定</h2>
{/* model改变影响View,view改变反过来影响model*/}
{/* 用onChange来监听input框,ref获取dom的value */}
<input type="text" ref='model' onChange={this.inputModel} />
<p>{this.state.cty}</p>
键盘事件
onKeyUp 键盘弹起
onKeyDown 键盘按下
keyCode 键盘对应数字
inputKeyup=(e) =>{
console.log(e.keyCode)
if(e.keyCode == 13){
console.log('回车事件')
}
}
<input type="text" onKeyUp = {this.inputKeyup} />
如果有问题,可以加我微信一起讨论,我们一起进步!
屏幕前的你,加油!