react如何获取Id的值

获取元素ID的值

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

使用useRef钩子

创建一个ref对象并将其附加到目标元素上，通过current属性访问DOM节点：

import React, { useRef } from 'react';

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

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

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

使用回调Ref

当需要动态设置多个ref时，回调Ref更灵活：

function MyComponent() {
  let elementRef = null;

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

  return <div id="myElement" ref={setRef}>内容</div>;
}

事件处理中获取

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

function handleClick(event) {
  console.log(event.target.id); // 从事件对象获取
}

<button id="submitBtn" onClick={handleClick}>提交</button>

动态ID场景

当ID是动态生成时，结合props或state使用：

function DynamicId({ itemId }) {
  const handleClick = (e) => {
    console.log(e.target.id); // 输出动态ID
  };

  return (
    <div id={`item-${itemId}`} onClick={handleClick}>
      项目{itemId}
    </div>
  );
}

注意事项

• Ref会在组件挂载后赋值，初始渲染期间current可能为null
• 避免过度使用ref，优先考虑React数据流
• 服务端渲染(SSR)环境下直接访问DOM可能出错