一、表单事件
1.监听表单的改变事件
onChange
2.在改变的事件里面获取表单输入的值事件对象
3.把表单输入的值赋值给usernamethis.setState({})
4.点击按钮的时候 获取state里面的username的值this.state.username
<input type="text" onChange={this.inputChange}/><button onClick={this.getInput}>获取input的值</button>
- 获取表单的值
inputChange=(e)=>{
// console.log('111');
// 获取表单的值
// console.log(e.target.value);
this.setState({
username:e.target.value
})
}
getInput=()=>{
alert(this.state.username)
}
-
效果展示
二、ref获取dom节点
- 1.给元素定义ref属性
<input ref="username" type="text" onChange={this.inputChange}/><button onClick={this.getInput}>获取input的值</button>
- 2.通过this.refs.username 获取dom节点
inputChange=()=>{
let val = this.refs.username.value
this.setState({
username:val
})
}
getInput=()=>{
alert(this.state.username)
}
三、键盘事件
- 键盘事件
<input type="text" onKeyUp={this.inputKeyup}/>
- 键盘事件执行方法
inputKeyup=(e)=>{
// console.log(e.keyCode)
if(e.keyCode == 13){
alert(e.target.value)
}
}
四、类似VUE数据绑定
- model改变影响view view改变影响model
<input value={this.state.username} onChange={this.inputChange}/>
<p>{this.state.username}</p>
<button onClick={this.setUsername}>改变username的值</button>
- 方法
inputChange=(e)=>{
this.setState({
username:e.target.value
})
}
setUsername=()=>{
this.setState({
username:'大古'
})
}
-
效果展示
好了,今天的分享就到这里了!
愿你三冬暖,愿你春不寒;愿你天黑有灯,下雨有伞。