【React】打卡笔记，入门学习01：点击事件

不分先后顺序

想到啥写啥了，记录自己学习react的一些内容

1、点击事件案例

1.1 基础用法：点击触发简单函数

js 复制代码

import { useState } from 'react';

function ClickExample() {
  // 定义事件处理函数
  const handleClick = () => {
    console.log('按钮被点击了！');
    alert('你点击了按钮～');
  };

  return (
    <div>
      {/* 绑定 onClick，注意传递的是函数引用（不要加括号，否则会立即执行） */}
      <button onClick={handleClick}>点击我</button>
    </div>
  );
}

export default ClickExample;

1.2 带参数的点击事件

js 复制代码

function UserList() {
  const users = [
    { id: 1, name: '张三' },
    { id: 2, name: '李四' },
  ];

  // 带参数的事件处理函数
  const handleUserClick = (userId, userName) => {
    console.log(`点击了用户：ID=${userId}，姓名=${userName}`);
  };

  return (
    <ul>
      {users.map((user) => (
        <li 
          key={user.id}
          // 用箭头函数包裹，传递参数（userId 和 userName）
          onClick={() => handleUserClick(user.id, user.name)}
          style={{ cursor: 'pointer', padding: '8px', border: '1px solid #eee' }}
        >
          {user.name}
        </li>
      ))}
    </ul>
  );
}

用 () => handleUserClick(参数) 包裹，确保点击时才执行函数并传递参数。

1.3 结合事件对象（e）

js 复制代码

function EventObjectExample() {
  const handleClick = (e) => {
    // e 是 React 合成事件对象（类似原生事件，但兼容跨浏览器）
    console.log('点击的元素：', e.target); // 触发事件的 DOM 元素
    console.log('点击坐标：', e.clientX, e.clientY); // 鼠标坐标
  };

  return (
    <div>
      <button onClick={handleClick}>点击查看事件信息</button>
      <p onClick={handleClick} style={{ color: 'blue' }}>点击这段文字也会触发事件</p>
    </div>
  );
}

2、两种类型的点击事件

示例代码

js 复制代码

import React, { Component } from 'react';

class UserList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      users: [
        { id: 1, name: '张三' },
        { id: 2, name: '李四' },
      ]
    };
  }

  // 事件处理函数（需要访问 this 或接收参数）
  handleUserClick(userId, userName, e) {
    // 这里的 this 指向组件实例（因为通过 bind 绑定了）
    console.log('当前组件实例：', this); 
    console.log(`点击了用户：ID=${userId}，姓名=${userName}`);
    console.log('事件对象：', e); // 最后一个参数会自动接收事件对象 e
  }

  render() {
    return (
      <ul>
        {this.state.users.map((user) => (
          <li 
            key={user.id}
            // 老写法：通过 bind 绑定 this，并预先传递参数（userId, userName）
            // 注意：bind 的第一个参数是 this 指向，后面的参数会传递给函数
            onClick={this.handleUserClick.bind(this, user.id, user.name)}
            style={{ cursor: 'pointer', padding: '8px', border: '1px solid #eee' }}
          >
            {user.name}
          </li>
        ))}
      </ul>
    );
  }
}

export default UserList;

背景：class 组件中的 this 问题

这种是class写法

onClick的方法需要前面加this，并且后面要用bind，而且传递的参数，第一个要写this
据说这种是老的写法了，也就是类组件，理解就好

现在都是写函数组件了，也就是不用class集成，直接写js的那种

js 复制代码

import { useState } from 'react';

function UserList() {
  const [users] = useState([
    { id: 1, name: '张三' },
    { id: 2, name: '李四' },
  ]);

  const handleUserClick = (userId, userName, e) => {
    console.log(`点击了用户：ID=${userId}，姓名=${userName}`);
    console.log('事件对象：', e);
  };

  return (
    <ul>
      {users.map((user) => (
        <li 
          key={user.id}
          // 现代写法：用箭头函数直接传递参数，无需绑定 this
          onClick={(e) => handleUserClick(user.id, user.name, e)}
          style={{ cursor: 'pointer', padding: '8px', border: '1px solid #eee' }}
        >
          {user.name}
        </li>
      ))}
    </ul>
  );
}

新的写法是，里面用箭头函数。

这里引出问题，e不传能接收吗？

总结

当使用箭头函数包裹处理函数调用（需要传递额外参数时），必须在箭头函数中显式接收 e 并传递给处理函数，否则处理函数收不到事件对象。

当直接绑定处理函数（无需额外参数时），React 会自动将 e 作为第一个参数传递，无需手动处理。