React中如何获取HTML元素id存入变量并在控制台输出

问题原因 #

你的代码存在两处核心错误，直接导致运行报错：

• 变量e未定义：你没有绑定任何事件回调，不存在事件对象e，直接在组件顶层调用e.currentTarget会直接抛出引用错误
• DOM属性读取方式错误：即便拿到了事件对应的DOM元素，id属性的读取语法是元素.id，不是元素.one，one是你给id设置的属性值而非属性名

另外函数组件的渲染阶段还未生成真实DOM，直接在渲染逻辑里读取DOM节点是无法拿到有效值的，需要根据你的使用场景选择对应实现方案：

方案1：事件触发时获取id #

如果你需要在用户点击/hover等交互触发时获取id，直接给元素绑定对应事件即可：

import React from 'react';
import './Test.css';

const Test = () => {
  // 事件回调里能拿到合法的事件对象e
  const handleClick = (e) => {
    const hello = e.currentTarget.id
    console.log(hello, 'test') // 输出 one test
  }

  return (
    <div id='one' onClick={handleClick}>Hello World</div>
  )
}

export default Test

方案2：组件加载后直接获取id #

如果你不需要用户交互，想组件挂载完成后就拿到id，用useRef获取DOM引用配合useEffect实现：

import React, { useRef, useEffect } from 'react';
import './Test.css';

const Test = () => {
  const divRef = useRef(null)

  // useEffect空依赖数组回调会在组件挂载完成后执行，此时ref已经指向真实DOM
  useEffect(() => {
    const hello = divRef.current.id
    console.log(hello, 'test') // 输出 one test
  }, [])

  return (
    <div id='one' ref={divRef}>Hello World</div>
  )
}

export default Test

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