React中如何复制数组指定项并检测点击的元素？

核心问题分析 #

你的代码里handleCopy函数没有接收当前点击项的参数，每次调用都会遍历整个data数组复制所有number值，所以才会出现复制多个数字的情况。只需要给复制函数传递当前项的目标属性，就能实现精准复制。

修改后的代码实现 #

import { useState } from 'react';
// 假设你已经导入了toast和BaseAlert组件

const data = [
  {title: "first", number: 1234},
  {title: "second", number: 5678},
];

const YourComponent = () => {
  // 用状态记录当前复制的number，方便提示或状态展示
  const [copiedNumber, setCopiedNumber] = useState(null);

  const handleCopy = (targetNumber) => {
    // 把数字转成字符串写入剪贴板
    navigator.clipboard.writeText(targetNumber.toString())
      .then(() => {
        setCopiedNumber(targetNumber);
        toast({
          position: "top",
          isClosable: true, // 修复原代码拼写错误：isclosable → isClosable
          duration: 1500,
          render: () => <BaseAlert title={`${targetNumber} copied!`} />,
        });

        setTimeout(() => {
          setCopiedNumber(null);
        }, 3000);
      })
      .catch(err => {
        console.error('复制失败:', err);
        // 可添加复制失败的提示逻辑
      });
  };

  return (
    <table>
      <thead>
        <tr>
          <th>Title</th>
          <th>Number</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        {data.map((item, index) => (
          <tr key={index}>
            <td>{item.title}</td>
            <td>{item.number}</td>
            <td>
              {/* 点击时传递当前项的number给handleCopy */}
              <button onClick={() => handleCopy(item.number)}>
                {/* 可替换为你的复制图标组件，比如<CopyIcon /> */}
                Copy
              </button>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default YourComponent;

关键修改点 #

• 给handleCopy添加参数：接收当前要复制的targetNumber，直接操作单个值，不再遍历整个数组。
• 按钮点击传参：在map渲染按钮时，通过() => handleCopy(item.number)把当前项的number传递给复制函数。
• 优化剪贴板操作：用then/catch处理剪贴板的异步逻辑，避免潜在错误；同时把数字转成字符串（targetNumber.toString()），因为navigator.clipboard.writeText仅接受字符串类型。
• 优化提示体验：提示内容显示具体复制的数字，用户能直观看到复制结果。

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