获取表单的值1
1. 监听表单的改变事件 onChange2. 在改变的事件里面获取表单输入的值event.target.value3. 把表单输入的值赋值给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. 监听表单的改变事件 onChange2. 在改变的事件里面获取表单输入的值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} />
如果有问题，可以加我微信一起讨论，我们一起进步！
屏幕前的你，加油！
