react如何获取Id的值

获取元素ID的值

在React中获取DOM元素的ID值可以通过useRef钩子或回调Ref实现。以下是两种常用方法：

使用useRef钩子

import React, { useRef } from 'react';

function Component() {
  const elementRef = useRef(null);

  const handleClick = () => {
    console.log(elementRef.current.id); // 获取ID值
  };

  return (
    <div id="myElement" ref={elementRef} onClick={handleClick}>
      点击获取ID
    </div>
  );
}

使用回调Ref

function Component() {
  let elementRef = null;

  const handleClick = () => {
    console.log(elementRef.id); // 获取ID值
  };

  return (
    <div 
      id="myElement" 
      ref={el => elementRef = el} 
      onClick={handleClick}
    >
      点击获取ID
    </div>
  );
}

事件处理中获取

通过事件对象直接访问目标元素的ID：

function Component() {
  const handleClick = (e) => {
    console.log(e.target.id); // 直接通过事件对象获取
  };

  return (
    <button id="submitBtn" onClick={handleClick}>
      提交
    </button>
  );
}

动态ID处理

当需要处理动态生成的ID时，可以结合状态管理：

function ListComponent() {
  const items = [{id: 'item1'}, {id: 'item2'}];

  const handleClick = (id) => {
    console.log(id); // 直接使用已存储的ID值
  };

  return (
    <ul>
      {items.map(item => (
        <li 
          key={item.id} 
          onClick={() => handleClick(item.id)}
        >
          {item.id}
        </li>
      ))}
    </ul>
  );
}