React-注册事件

素颜马尾好姑娘i 2023-07-04 11:24 9阅读 0赞

### 文章目录 ###

*   *   *   *  注册事件
             *  事件处理函数中 this 问题
             *  事件传参
             *  获取事件对象

#### 注册事件 ####

React 元素的事件处理与 DOM 元素有些不同，React 通过事件绑定属性的方式注册事件时要采用驼峰式命名，其对应的属性值为一个函数而不是字符串。

示例：

import React from 'react'
    import ReactDOM from 'react-dom'
    
    class Hello extends React.Component { 
    	render() { 
    	  return (
            <div>
             { /* 驼峰命名，值为当前组件的相关函数 */}
    		  <button onClick={ this.fun}>按钮</button>
    		</div>
    	  )
    	}
    	
    	fun() { 
    	  console.log('触发了点击事件！')
    	}
    }
    
    ReactDOM.render(<Hello />, document.getElementById('root'))

![在这里插入图片描述][20200210173001442.gif]

#### 事件处理函数中 this 问题 ####

在 React 中通过 class 创建的组件，其绑定的事件处理函数中的 this 值为 `undefined`，通常需要将事件处理函数中的 this 指向当前组件实例，介绍几种处理 this 指向的方法：

方法一：在调用事件处理函数时通过 `bind()` 方法手动去指定 this

import React from 'react'
    import ReactDOM from 'react-dom'
    
    class Hello extends React.Component { 
      render () { 
        return (
          <div>
        	{ /* 通过 bind() 将 this 修改为当前实例 */}
            <button onClick={ this.func.bind(this)}>this 指向1</button>
          </div>
        )
      }
    
      func () { 
        console.log('调用了 func()')
        console.log(this)
      }
    }
    
    ReactDOM.render(<Hello />, document.getElementById('root'))

![在这里插入图片描述][20200210183539616.gif]  
方法二：直接在构造器中修改事件处理函数的 this

import React from 'react'
    import ReactDOM from 'react-dom'
    
    class Hello extends React.Component { 
      constructor(props) { 
        super()
        // 修改 this
        this.show= this.show.bind(this)
      }
      render () { 
        return (
          <div>
            <button onClick={ this.func}>this指向</button>
          </div>
        )
      }
      show() { 
        console.log('调用了 show()')
        console.log(this)
      }
    }
    
    ReactDOM.render(<Hello />, document.getElementById('root'))

![在这里插入图片描述][20200210201730795.gif]  
方法三：通过属性初始化结合箭头函数定义事件处理函数（箭头函数没有自己的 this，[箭头函数的this][this]）

import React from 'react'
    import ReactDOM from 'react-dom'
    
    class Hello extends React.Component { 
      render () { 
        return (
          <div>
            <button onClick={ this.say}>this指向</button>
          </div>
        )
      }
      /* 属性初始化+箭头函数 */
      say = () => { 
        console.log('调用了 say()')
        console.log(this)
      }
    }
    
    ReactDOM.render(<Hello />, document.getElementById('root'))

![在这里插入图片描述][20200210203454884.gif]  
方法四：将事件属性的值设为箭头函数，箭头函数中直接调用事件处理函数

import React from 'react'
    import ReactDOM from 'react-dom'
    
    class Hello extends React.Component { 
      render () { 
        return (
          <div>
            { /* 箭头函数中直接调用 */}
            <button onClick={ () => this.fun()}>this 指向</button>
          </div>
        )
      }
      fun () { 
        console.log('调用了 fun()')
        // 未指定时 this 为 undefined
        console.log(this)
      }
    }
    
    ReactDOM.render(<Hello />, document.getElementById('root'))

![在这里插入图片描述][20200210204503839.gif]

#### 事件传参 ####

方法一：通过 `bind()` 方法来进行传参，bind() 方法不仅可以修改 this 指向，还可以将后面的参数传递给被调用的目标函数。

bind() 语法：

fun.bind(thisArg[, arg1[, arg2[, ...]]])

*  `arg1、arg2` 传递给目标函数的参数

示例：

import React from 'react'
    import ReactDOM from 'react-dom'
    
    class Hello extends React.Component { 
      render () { 
        return (
          <div>
            { /* 通过 bind() 向事件函数传参 */}
            <button onClick={ this.show.bind(this, '大熊', '香香')}>按钮</button>
          </div>
        )
      }
    
      show (arg, arg2) { 
        console.log('调用了 show()')
        console.log(arg, arg2)
      }
    }
    
    ReactDOM.render(<Hello />, document.getElementById('root'))

![在这里插入图片描述][2020021109260561.gif]  
方法二：将事件属性的属性值设为箭头函数，在箭头函数中调用并传递参数。

import React from 'react'
    import ReactDOM from 'react-dom'
    
    class Hello extends React.Component { 
      render () { 
        return (
          <div>
            { /* 方法二：将事件属性的属性值设为箭头函数，在箭头函数中调用并传递参数。 */}
            <button onClick={ () => this.say('阿彬', '莲妹')}>按钮</button>
          </div>
        )
      }
    
      say (arg, arg2) { 
        console.log('调用了 say()')
        console.log(arg, arg2)
      }
    }
    
    ReactDOM.render(<Hello />, document.getElementById('root'))

![在这里插入图片描述][20200211093715775.gif]

#### 获取事件对象 ####

方法一：不传参数时，事件处理函数默认第一个形参为事件对象

import React from 'react'
    import ReactDOM from 'react-dom'
    
    class Hello extends React.Component { 
      render () { 
        return (
          <div>
            { /* 没有传参 */}
            <button onClick={ this.fun}>按钮</button>
          </div>
        )
      }
      // 第一个参数就是事件对象
      fun (e) { 
        console.log(e)
      }
    }
    
    ReactDOM.render(<Hello />, document.getElementById('root'))

![在这里插入图片描述][2020021109484824.gif]  
方法二：通过属性初始化+箭头函数的方式（不传参）

import React from 'react'
    import ReactDOM from 'react-dom'
    
    class Hello extends React.Component { 
      render () { 
        return (
          <div>
            { /* 没有传参 */}
            <button onClick={ this.fun}>按钮</button>
          </div>
        )
      }
      // 第一个参数就是事件对象
      fun = e => { 
        console.log('调用了fun()')
        console.log(e)
      }
    }
    
    ReactDOM.render(<Hello />, document.getElementById('root'))

![在这里插入图片描述][202002111048590.gif]  
方法三：在传参时可以通过 bind() 来获取事件对象；会默认事件处理函数的参数列表中后面未传值的那一个参数为事件对象。

import React from 'react'
    import ReactDOM from 'react-dom'
    
    class Hello extends React.Component { 
      render () { 
        return (
          <div>
            { /* 传参时使用 bind() 获取事件对象 */}
            <button onClick={ this.say.bind(this, '大兵')}>按钮</button>
          </div>
        )
      }
      say (arg, arg2, arg3) { 
        console.log('调用了 say()')
        // arg2 为事件对象
        console.log(arg, arg2)
        // arg3 为 undefined
        console.log(arg3)
      }
    }
    
    ReactDOM.render(<Hello />, document.getElementById('root'))

![在这里插入图片描述][20200211100538623.gif]

方法四：将事件属性的值设为箭头函数并定义形参（事件对象），在箭头函数中直接调用事件处理函数并接收事件对象。

import React from 'react'
    import ReactDOM from 'react-dom'
    
    class Hello extends React.Component { 
      render () { 
        return (
          <div>
            { /* 使用箭头函数传递事件对象 */}
            <button onClick={ (e) => this.show('大兵', e)}>按钮</button>
          </div>
        )
      }
      /* 接收事件对象 */
      show (arg, arg2) { 
        console.log('调用了 show()')
        console.log(arg, arg2)
      }
    }
    
    ReactDOM.render(<Hello />, document.getElementById('root'))

![在这里插入图片描述][20200211122519246.gif]

[20200210173001442.gif]: https://img-blog.csdnimg.cn/20200210173001442.gif
[20200210183539616.gif]: https://img-blog.csdnimg.cn/20200210183539616.gif
[20200210201730795.gif]: https://img-blog.csdnimg.cn/20200210201730795.gif
[this]: https://blog.csdn.net/weixin_44486539/article/details/96280427
[20200210203454884.gif]: https://img-blog.csdnimg.cn/20200210203454884.gif
[20200210204503839.gif]: https://img-blog.csdnimg.cn/20200210204503839.gif
[2020021109260561.gif]: https://img-blog.csdnimg.cn/2020021109260561.gif
[20200211093715775.gif]: https://img-blog.csdnimg.cn/20200211093715775.gif
[2020021109484824.gif]: https://img-blog.csdnimg.cn/2020021109484824.gif
[202002111048590.gif]: https://img-blog.csdnimg.cn/202002111048590.gif
[20200211100538623.gif]: https://img-blog.csdnimg.cn/20200211100538623.gif
[20200211122519246.gif]: https://img-blog.csdnimg.cn/20200211122519246.gif