一、事件对象

1.1什么是事件对象

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

1.2 e.target

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

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

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

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);
}

//调用方式
<h3>2.1 第一种方式：表单事件:获取表单元素的值，通过事件对象</h3>
<input onChange={this.inputChange}/><button onClick={this.getInputValue}>获取表单值</button>

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);
}

<h3>2.2 第二种方式：表单事件:获取变单元素的值，this.refs.属性</h3>
<input onChange={this.inputChange2} ref="userAddress"/><button onClick={this.getInputValue2}>获取表单值</button>

三、键盘事件

键盘事件与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(
           <div>
               <h2>一、事件对象</h2>
                <button aid="btn" onClick={this.getMsg}>事件对象</button>
               <br/>
               <br/>
               <br/>
               <br/>
               <h2>二、表单事件</h2>
               <h3>2.1 第一种方式：表单事件:获取表单元素的值，通过事件对象</h3>
               <input onChange={this.inputChange}/><button onClick={this.getInputValue}>获取表单值</button>
               <br/>
               <br/>
               <br/>
               <br/>
               <h3>2.2 第二种方式：表单事件:获取变单元素的值，this.refs.属性</h3>
               <input onChange={this.inputChange2} ref="userAddress"/><button onClick={this.getInputValue2}>获取表单值</button>
               <br/>
               <br/>
               <br/>
               <br/>
               <h2>键盘事件</h2>

           </div>
        )
    }

}
export default  ClickBindItem;