5.React表单事件、ref获取dom节点等介绍

一、表单事件

1.监听表单的改变事件 onChange
2.在改变的事件里面获取表单输入的值 事件对象
3.把表单输入的值赋值给username this.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:'大古'
        })
    }

• 效果展示

  
  
  

  改变前
  
  
  

  改变后
  
  

  好了，今天的分享就到这里了！
  愿你三冬暖，愿你春不寒；愿你天黑有灯，下雨有伞。

  
  
  

  小晴天