react事件中的事件对象和常见事件

不管是在原生的js还是vue中，所有的事件都有其事件对象，该事件对象event中包含着所有与事件相关的信息，在react中，所有的事件也有其事件对象，在触发DOM上的某个事件时，就会产生一个事件对象。

在开始前，先按照之前创建项目的方法新建一个项目，然后对项目目录进行整理，并新建一个组件，在App.js中引入该组件。

获取事件对象

首先在组件中添加一个按钮，并为按钮添加一个点击事件，点击打印该事件的事件对象。

 

点击按钮触发事件，打印该事件的事件对象。

 在这个事件对象中，有很多的字段，用的比较多就是targetl了，例如实现下面的一些用法。

表单事件

在vue中，通过事件双向绑定，我们可以很轻松的获取到用户输入的值，但是在react中，并没有这种数据流，所以，当我们需要获取到用户输入的input值时，就需要使用最原始的方法了：

1. 监听input框的改变事件
2. 在改变事件中获取输入的值
3. 在构造函数中添加一个数据inputValue，并将获取的值赋值给inputValue
4. 获取state里面的inputvalue

完整的写法如下：

import React from 'react';
class Test extends React.Component{
    constructor(props){
        super(props);
        this.state={
            msg:'我是一个组件',
            inputValue:''
        }
    }
    changeInput=(event)=>{
        console.log(event.target.value);
        this.setState({
            inputValue:event.target.value
        })
    }
    getInput=()=>{
        console.log(this.state.inputValue)
    }
    render(){
        return(
            <div>
                {this.state.msg}
                <br/>
                <input onChange={this.changeInput}/>
                <button onClick={this.getInput}>取值</button>
            </div>
        )
    }
}
export default Test;

 ref获取DOM节点

在上面的例子中，通过事件对象的target获取到了用户输入的值，虽然值拿到了，但是过程比较麻烦，在react中，除了target字段以外，还可以通过ref字段获取DOM节点，从而获取我们想要的信息，例如在上面的例子中，想要获取用户输入的input的值，可以为input添加ref并指定名字，在触发的事件中就可以通过ref的名字找到相应的节点，从而获取数据了。

import React from 'react';
class Test extends React.Component{
    constructor(props){
        super(props);
        this.state={
            msg:'我是一个组件',
            inputValue:''
        }
    }
    getInput=()=>{
        let val = this.refs.ivalue.value;
        this.setState({
            inputValue:val
        });
        console.log(this.state.inputValue);
    }
    render(){
        return(
            <div>
                {this.state.msg}
                <br/>
                <input ref="ivalue" />
                <button onClick={this.getInput}>取值</button>
            </div>
        )
    }
}
export default Test;

模拟实现数据双向绑定

import React from 'react';
class Test extends React.Component{
    constructor(props){
        super(props);
        this.state={
            inputValue:'123'
        }
    }
    getInput=(e)=>{
        this.setState({
            inputValue:e.target.value
        });
    }
    render(){
        return(
            <div>
                {this.state.inputValue}
                <br/>
                <input value={this.state.inputValue} onChange={this.getInput}/>
            </div>
        )
    }
}
export default Test;