面试题：React 中在列表里如何绑定点击事件并传递参数

Question

假设你有一个 React 组件，该组件渲染一个包含多个按钮的列表。请描述如何为每个按钮绑定点击事件，并且在点击时能够获取到该按钮对应的唯一标识（比如数组的索引或者某个对象的 id）。用代码示例说明你的实现方式。

Answer 1

在 React 中，可以通过以下方式为列表中的每个按钮绑定点击事件并获取其唯一标识。假设列表数据为一个数组，数组元素包含按钮的标识 id：

import React, { useState } from 'react';

const ButtonList = () => {
  const buttonData = [
    { id: 1, text: '按钮1' },
    { id: 2, text: '按钮2' },
    { id: 3, text: '按钮3' }
  ];

  const handleClick = (id) => {
    console.log(`点击了按钮，id 为: ${id}`);
  };

  return (
    <div>
      {buttonData.map(({ id, text }) => (
        <button key={id} onClick={() => handleClick(id)}>
          {text}
        </button>
      ))}
    </div>
  );
};

export default ButtonList;

在上述代码中：

1. 定义了 buttonData 数组，其中每个对象包含 id 和 text 属性。
2. handleClick 函数接收按钮的 id 作为参数，在函数内部可以进行相应的逻辑处理，这里只是简单打印 id。
3. 使用 map 方法遍历 buttonData 数组，为每个按钮设置 key 属性以帮助 React 高效更新 DOM，同时为每个按钮绑定 onClick 事件，并在点击时调用 handleClick 函数并传入对应的 id。