React TypeScript onClick事件处理：外部函数如何获取点击的数组项

当然可以在外部事件处理函数中获取对应的数组项，以下是两种常用的实现方式：

方法一：直接传递数组项作为参数 #

这是最直观的方案，在onClick中用箭头函数包裹处理函数，并把当前循环的item作为参数传入：

import React from 'react';

const CityList = () => {
  const cities = ['New York', 'London', 'Tokyo'];

  // 外部事件处理函数，直接接收数组项
  const handleItemClick = (city: string) => {
    console.log("Clicked", city);
    // 复杂逻辑中直接使用city即可
  };

  return (
    <ul className="list-group">
      {cities.map(city => (
        <li 
          className="list-group-item" 
          key={city} 
          onClick={() => handleItemClick(city)}
        >
          {city}
        </li>
      ))}
    </ul>
  );
};

export default CityList;

这种方式的核心是利用箭头函数捕获当前循环的item，将其传递给外部处理函数，无需操作DOM就能直接拿到对应的数据，完全满足复杂逻辑中使用数组项的需求。

方法二：利用DOM的data属性绑定数据 #

如果你不想用箭头函数包裹，可以把数组项存储在列表元素的data-*属性中，然后在处理函数中通过event.currentTarget.dataset读取：

import React from 'react';

const CityList = () => {
  const cities = ['New York', 'London', 'Tokyo'];

  // 外部事件处理函数，从事件对象中读取绑定的数据
  const handleItemClick = (e: React.MouseEvent<HTMLLIElement>) => {
    const city = e.currentTarget.dataset.city;
    if (city) {
      console.log("Clicked", city);
      // 复杂逻辑中使用city
    }
  };

  return (
    <ul className="list-group">
      {cities.map(city => (
        <li 
          className="list-group-item" 
          key={city} 
          data-city={city}
          onClick={handleItemClick}
        >
          {city}
        </li>
      ))}
    </ul>
  );
};

export default CityList;

注意事项：

• data-*属性的值会自动转为字符串，如果你的数组项是复杂对象，需要先用JSON.stringify()序列化，再在处理函数中用JSON.parse()解析。
• TypeScript中需要指定事件的类型（如React.MouseEvent<HTMLLIElement>），才能正确提示currentTarget和dataset的属性。

你之前通过event.currentTarget无法获取数组项，是因为DOM元素本身不会自动关联你的数组数据，必须主动通过参数传递或data属性绑定的方式，把数据和DOM元素关联起来。

内容的提问来源于stack exchange，提问作者SK99