React中点击卡片按钮如何获取父div的id并赋值给变量a

这里提供几种实用的实现方式，根据你的场景选择：

方法1：直接传递ID（最直观） #

如果渲染卡片时已经知道ID值，直接把ID作为参数传给点击事件处理函数即可，无需操作DOM：

import { useState } from 'react';

function CardList() {
  // 推荐用React状态管理变量，而非全局/局部let（符合组件状态管理范式）
  const [a, setA] = useState('');

  const handleCardClick = (cardId) => {
    // 如果一定要用let a，替换成 a = cardId; 即可
    setA(cardId);
    console.log('当前选中卡片ID:', cardId);
  };

  return (
    <>
      <div id='1' className='card'>
        <button onClick={() => handleCardClick('1')}>Click</button>
        <div className='card-body'></div>
      </div>
      <div id='2' className='card'>
        <button onClick={() => handleCardClick('2')}>Click</button>
        <div className='card-body'></div>
      </div>
      {/* 批量渲染场景示例 */}
      {[3,4,5].map(id => (
        <div key={id} id={id} className='card'>
          <button onClick={() => handleCardClick(id.toString())}>Click</button>
          <div className='card-body'></div>
        </div>
      ))}
    </>
  );
}

优点：无需依赖DOM结构，代码清晰，性能更好，适合批量渲染卡片的场景。

方法2：通过事件对象获取父元素ID #

如果无法提前获取ID，可利用事件对象找到卡片容器的ID：

function CardList() {
  let a = '';

  const handleCardClick = (e) => {
    // 找到最近的.card容器（避免DOM结构变化导致的错误）
    const cardElement = e.currentTarget.closest('.card');
    if (cardElement) {
      a = cardElement.id;
      console.log('当前选中卡片ID:', a);
    }
  };

  return (
    <>
      <div id='1' className='card'>
        <button onClick={handleCardClick}>Click</button>
        <div className='card-body'></div>
      </div>
      <div id='2' className='card'>
        <button onClick={handleCardClick}>Click</button>
        <div className='card-body'></div>
      </div>
    </>
  );
}

注意：如果卡片DOM结构调整（比如按钮外面多了一层容器），closest('.card')能确保正确找到目标元素，比直接用parentElement更鲁棒。

方法3：使用React ref（不推荐，仅特殊场景） #

如果需要直接操作DOM元素，可给卡片添加ref，但这种方式不符合React的声明式编程理念，除非必要不建议使用：

import { useRef } from 'react';

function CardList() {
  let a = '';
  const cardRefs = useRef({});

  const handleCardClick = (cardId) => {
    a = cardRefs.current[cardId].id;
    console.log('当前选中卡片ID:', a);
  };

  return (
    <>
      <div ref={el => cardRefs.current['1'] = el} id='1' className='card'>
        <button onClick={() => handleCardClick('1')}>Click</button>
        <div className='card-body'></div>
      </div>
      <div ref={el => cardRefs.current['2'] = el} id='2' className='card'>
        <button onClick={() => handleCardClick('2')}>Click</button>
        <div className='card-body'></div>
      </div>
    </>
  );
}

内容的提问来源于stack exchange，提问作者Said Al-Ghiyats