React之事件及事件绑定的写法

1.绑定事件

react中采用on+事件名的方式来绑定一个事件，注意，这里和原生的事件是有区别的，原生的事件全是小写onclick, React里的事件是驼峰onClick，React的事件并不是原生事件，而是合成事件。

2.事件绑定的写法

直接在render里写行内的箭头函数(不推荐)

import React, { Component } from 'react';

class Event extends Component{
    //定义一个状态
   constructor(){
       super()
       this.state={
           msg:'Hello World!'
       }
   }
   
    render(){
        return(
            <div>
            <button onClick={()=>{this.setState({msg:'事件一'})}}>事件一</button>
            <h2>{this.state.msg}</h2>
            </div>
        )
    }
}

export default Event

在组件内使用箭头函数定义一个方法(最推荐)

import React, { Component } from 'react';

class Event extends Component{
    //定义一个状态
   constructor(){
       super()
       this.state={
           msg:'Hello World!'
       }
   }

   change=()=>{
       this.setState({
           msg:'事件二'
       })
   }
  
    render(){
        return(
            <div>
            <button onClick={this.change}>事件二</button>
            <h2>{this.state.msg}</h2>
            </div>
        )
    }
}

export default Event

直接在组件内定义一个非箭头函数的方法，然后在render里直接使用：
onClick={this.handleClick.bind(this)}(不推荐)

import React, { Component } from 'react';

class Event extends Component{
    //定义一个状态
   constructor(){
       super()
       this.state={
           msg:'Hello World!'
       }
   }

   tab(){
       this.setState({
           msg:'事件三'
       })
   }
  
    render(){
        return(
            <div>
            <button onClick={this.tab.bind(this)}>事件三</button>
            <h2>{this.state.msg}</h2>
            </div>
        )
    }
}

export default Event

直接在组件内定义一个非箭头函数的方法，然后在constructor里bind(this)(推荐)

import React, { Component } from 'react';

class Event extends Component{
    //定义一个状态
   constructor(){
       super()
       this.state={
           msg:'Hello World!'
       }
    this.modify=this.modify.bind(this)
   }

  modify(){
      this.setState({
        msg:'事件四'      
    })
  }
    render(){
        return(
            <div>
            <button onClick={this.modify}>事件四</button>
            <h2>{this.state.msg}</h2>
            </div>
        )
    }
}

export default Event

3.Event 对象

和普通浏览器一样，事件handler会被自动传入一个 event 对象，这个对象和普通的浏览器 event 对象所包含的方法和属性都基本一致。不同的是 React中的 event 对象并不是浏览器提供的，而是它自己内部所构建的。它同样具有event.stopPropagation、event.preventDefault 这种常用的方法

import React, { Component } from 'react';

class Event extends Component{

    handler=(e)=>{
        console.log(e)
    }
    render(){
        return(
            <div>
            <button onClick={this.handler}>事件对象</button>
            </div>
        )
    }
}

export default Event

通过上面点击按钮，可以发现在控制台输出的事件对象中的值很多都是null，但是这并不影响，可以正常使用。

4.事件的参数传递

当我们定义事件需要传递参数的时候，有以下几种情况：
在render里调用方法的地方外面包一层箭头函数 【推荐】

import React, { Component } from 'react';

class Event extends Component{
    constructor(){
        super()
        this.state={
            msg:'Hello'
        }
    }

    change=(val)=>{
        this.setState({
            msg:val
        })
    }
    render(){
        return(
            <div>
            <button onClick={()=>{this.change(400)}}>事件二</button>
            <p>{this.state.msg}</p>
            </div>
        )
    }
}

export default Event

在render里通过this.handleEvent.bind(this, 参数)这样的方式来传递

import React, { Component } from 'react';

class Event extends Component{
    constructor(){
        super()
        this.state={
            msg:'Hello'
        }
    }

    tab(val){
        this.setState({
            msg:val
        })
    }
    render(){
        return(
            <div>
            <button onClick={this.tab.bind(this,300)}>事件三</button>
            <p>{this.state.msg}</p>
            </div>
        )
    }
}

export default Event

5.处理用户输入–ref绑定

ref绑定形式有两种

1. ref = ‘xxx’
2. ref = { el => this.xxx = el } 【 推荐 】 el指的就是绑定的元素/组件

（1）获取input的值
有两种书写方式可以实现输入绑定
方式一：
给input输入框绑定ref属性，如下

  <input type="text" ref="username"/>

完整示例代码如下：

import React, { Component } from 'react';

class Event extends Component{

    getVal=(e)=>{
        console.log(this)/.通过输出此处的this可以发现，username在this.refs中
        if(e.keyCode===13){
            
            console.log(this.refs.username.value)
        }
    }
   
    render(){
        return(
            <div>
                <input type="text" onKeyUp={this.getVal} ref="username"/>//此处的username为自定义
            </div>
        )
    }
}

export default Event

方式二：
给input输入框绑定ref属性，只不过和上面有所区别

<input type="text" ref ={el=>this.username=el}/>

此处的el和username均是自定义的。
完整示例代码如下：

import React, { Component } from 'react';

class Event extends Component{

    getVal1=(e)=>{
        console.log(this)//输出this可以发现，username就包含在事件对象中
        if(e.keyCode===13){
            console.log(this.username.value)
        }
    }

    render(){
        return(
            <div>
                <input type="text" onKeyUp={this.getVal1} ref ={el=>this.username=el}/>
            </div>
        )
    }
}

export default Event

（2）给input输入框写入内容

import React, { Component } from 'react';

class Event extends Component{
    constructor(){
        super()
        this.state={
            msg:'Hello World!'
        }
    }
    render(){
        return(
            <div>
                <input type="text" defaultValue={this.state.msg}/>
            </div>
        )
    }
}

export default Event