React 前端框架4

六、React 中的事件处理

(一)绑定事件的方式

在 React 中,事件绑定和传统的 HTML 中的事件绑定有一些不同,它采用了驼峰命名法来命名事件名称,并且事件绑定的属性值是一个函数。例如,在 HTML 中绑定点击事件可能是 <button onclick="handleClick()">点击我</button>,而在 React 中则是 <button onClick={() => handleClick()}>点击我</button>(这里假设 handleClick 是在组件内部定义的一个函数),或者更常见的是将函数先绑定到组件实例上(主要针对类组件),比如:

复制代码
import React, { Component } from 'react';

class ButtonComponent extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log('按钮被点击了');
  }

  render() {
    return (
      <button onClick={this.handleClick}>点击我</button>
    );
  }
}

export default ButtonComponent;

在类组件中,因为类的方法默认情况下 this 的指向问题,需要在 constructor 中通过 bind 方法将事件处理函数的 this 绑定到组件实例上,这样才能在事件处理函数中正确地访问到组件的属性和 state 等数据。

(二)事件参数传递

有时候我们需要在事件处理函数中传递额外的参数,常见的做法有两种:

  • 使用箭头函数包裹

    import React, { Component } from 'react';

    class ParameterPassingComponent extends Component {
    handleClick(name) {
    console.log(你好, ${name}!);
    }

    复制代码
    render() {
      return (
        <div>
          <button onClick={() => this.handleClick('小明')}>向小明打招呼</button>
          <button onClick={() => this.handleClick('小红')}>向小红打招呼</button>
        </div>
      );
    }

    }

    export default ParameterPassingComponent;

这里通过箭头函数包裹的方式,在调用 this.handleClick 时传递了不同的参数进去。

复制代码
import React, { Component } from 'react';

class ParameterPassingComponent extends Component {
  handleClick(name) {
    console.log(`你好, ${name}!`);
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick.bind(this, '小明')}>向小明打招呼</button>
        <button onClick={this.handleClick.bind(this, '小红')}>向小红打招呼</button>
      </div>
    );
  }
}

export default ParameterPassingComponent;

使用 bind 方法除了能绑定 this 之外,还可以同时传递其他参数,达到类似的效果。

相关推荐
找不到工作的菜鸟几秒前
Three.js三大组件:场景(Scene)、相机(Camera)、渲染器(Renderer)
前端·javascript·html
定栓3 分钟前
vue3入门-v-model、ref和reactive讲解
前端·javascript·vue.js
binqian35 分钟前
【异步】js中异步的实现方式 async await /Promise / Generator
开发语言·前端·javascript
随笔记1 小时前
react-router里的两种路由方式有什么不同
前端·react.js
前端李二牛1 小时前
异步任务并发控制
前端·javascript
你也向往长安城吗1 小时前
推荐一个三维导航库:three-pathfinding-3d
javascript·算法
karrigan2 小时前
async/await 的优雅外衣下:Generator 的核心原理与 JavaScript 执行引擎的精细管理
javascript
wycode2 小时前
Vue2实践(3)之用component做一个动态表单(二)
前端·javascript·vue.js
wycode3 小时前
Vue2实践(2)之用component做一个动态表单(一)
前端·javascript·vue.js
第七种黄昏3 小时前
Vue3 中的 ref、模板引用和 defineExpose 详解
前端·javascript·vue.js