从零到实战:React无人点餐收银系统教程(4) React事件 方法事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定

主要内容：

键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定

 

获取执行事件的dom节点以及DOM属性：

run=(event)=>{

    console.dir(event)
    /*获取执行事件的dom节点   [object HTMLButtonElement]*/
        
    event.target.style.background='red';

    //获取dom的属性
    alert(event.target.getAttribute('aid'))
}

 <button aid="123" onClick={this.run}>事件对象</button>

表单事件：

分析思路：

1、监听表单的改变事件 ------------onChange

2、在改变的事件里面获取表单输入的值 -----------事件对象

3、把表单输入的值赋值给username this.setState({})

4、点击按钮的时候获取 state里面的username this.state.username

 

inputChange=(e)=>{
  console.log('测试成功');
  // 获取表单里面的值
  console.log(e.target.value);
  this.setState({
      username:e.target.value
  })                         
}

getInput=()=>{
   alert(this.state.username);
}

<input onChange={this.inputChange} />
<button onClick={this.getInput}>获取input的值</button>

给元素定义ref属性,通过this.refs.username 获取dom节点

inputChange=()=>{
        
    let val=this.refs.username.value;
    console.log(val)
    this.setState({
        username:val
    })
}

getInput=()=>{
    alert(this.state.username)
}

 <input ref="username" onChange={this.inputChange}/> <button onClick={this.getInput}>获取input的值</button>

键盘事件：

    // 键盘事件
    inputKeyUp=(e)=>{
        console.log(e.keyCode);
        if(e.keyCode===13){
            alert(e.target.value);
        }
    }
    inputonKeyDown=(e)=>{
        console.log(e.keyCode);
        if(e.keyCode===13){
            alert(e.target.value);
        }
    }

    <input onKeyUp={this.inputKeyUp}/>
    <br />
    <input onKeyDown={this.inputonKeyDown}/>