从零到实战: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'))
}

 事件对象

表单事件：

分析思路：

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的值

给元素定义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的值

键盘事件：

    // 键盘事件
    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);
        }
    }