第5节 键盘事件、表单事件、ref获取dom节点、数据双向绑定 2019-05-19

一、事件对象

1.1什么是事件对象

在触发dom上的某个事件时会产生一个事件对象event，这个对象包含着所有与事件相关的信息。

1.2 e.target

获取执行事件的dom节点与原js写法基本类似

/*箭头函数*/
getMsg=(e) =>{
    e.target.style.background='red';
    console.log( e.target.getAttribute("aid"));
}
 
 /*调用事件*/
事件对象

二、表单事件，获取表单的值

2.1第一种方式：通过事件对象 e.target.value

（1）具体步骤如下：

• 监听表单的改变事件 onChange
• 在改变的事件里面获取表单输入的值
• 把表单输入的值赋值给对应的state中的变量 this.setState({ age:' 18'})
• 点击按钮的时候获取state中对应元素的值 this.state.age

（2）DEMO示例：

/*监听改变*/
inputChange=(e)=>{
    console.log(e.target.value);

    //改变值
    this.setState({
        age:e.target.value  //通过事件对象获取值
    })
}

/*获取改变的值*/
getInputValue=(e)=>{
    console.log(this.state.age);
}

//调用方式
2.1 第一种方式：表单事件:获取表单元素的值，通过事件对象
获取表单值

2.2第二种方式：使用refs

（1）具体步骤如下：
给标签元素定义ref属性
通过refs获取值，this.refs.msg.value
（2）demo示例

/*监听改变*/
inputChange2=(e)=>{
    let val=this.refs.userAddress.value;
    this.setState({
        userAddr:val  //通过refs获取
    })
}

/*获取改变的值*/
getInputValue2=(e)=>{
    console.log(this.state.userAddr);
}

2.2 第二种方式：表单事件:获取变单元素的值，this.refs.属性
获取表单值

三、键盘事件

键盘事件与js中的键盘事件效果一致；

3.1 onKeyUp

3.2 onKeyDown

四、双向数据绑定

model改变影响view，view改变反过来影响model；
在vue中通过v-model实现双向绑定；

五、DEMO完整示例

import React from 'react';

class ClickBindItem extends React.Component{
    constructor(props){
        super(props);

        //定义数据
        this.state={
            name:'张三',
            age:'',
            address:'山东省青岛市市南区宁夏路288号软件园2号楼',
            userAddr:''
        }
    }


    /*箭头函数*/
    getMsg=(e) =>{
        alert(this.state.name);
        console.table(e);

        e.target.style.background='red';
        console.log( e.target.getAttribute("aid"));
    }

    /*监听改变*/
    inputChange=(e)=>{
        console.log(e.target.value);

        //改变值
        this.setState({
            age:e.target.value  //通过事件对象获取值
        })
    }

    /*获取改变的值*/
    getInputValue=(e)=>{
        console.log(this.state.age);
    }

    /*监听改变*/
    inputChange2=(e)=>{
        let val=this.refs.userAddress.value;
        this.setState({
            userAddr:val  //通过refs获取
        })
    }

    /*获取改变的值*/
    getInputValue2=(e)=>{
        console.log(this.state.userAddr);
    }

    render() {
        return(
           

               
一、事件对象
                事件对象
               

               

               

               

               
二、表单事件
               
2.1 第一种方式：表单事件:获取表单元素的值，通过事件对象
               获取表单值
               

               

               

               

               
2.2 第二种方式：表单事件:获取变单元素的值，this.refs.属性
               获取表单值
               

               

               

               

               
键盘事件

           
        )
    }

}
export default  ClickBindItem;