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可能出错
