如何在React中点击div时获取其innerHTML内容

原代码里this.innerHTML无法获取目标内容，因为这里的this指向的是TestTag组件实例，不是被点击的div DOM元素，最终会返回undefined。以下是两种可行的解决方法：

方法一：利用事件对象的target属性 #

直接在onClick回调中接收事件参数，通过event.target获取触发点击的DOM元素，进而读取其innerHTML：

import React from "react";
import * as ReactDOM from "react-dom/client";

class TestTag extends React.Component {
  render() {
    return <div onClick={(e) => console.log(e.target.innerHTML)}> Hello world </div>;
  }
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<TestTag />);

e.target就是当前被点击的div节点，直接访问它的innerHTML属性就能拿到标签内的内容。

方法二：使用React Ref获取DOM元素 #

通过React提供的createRef创建引用，绑定到目标div上，之后可通过引用直接访问DOM元素：

import React from "react";
import * as ReactDOM from "react-dom/client";

class TestTag extends React.Component {
  constructor(props) {
    super(props);
    // 创建ref对象
    this.divRef = React.createRef();
  }

  handleClick = () => {
    // 确保ref已关联到DOM元素
    if (this.divRef.current) {
      console.log(this.divRef.current.innerHTML);
    }
  };

  render() {
    // 将ref绑定到div上
    return <div ref={this.divRef} onClick={this.handleClick}> Hello world </div>;
  }
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<TestTag />);

这种方式更适合需要多次访问该DOM元素的场景，通过this.divRef.current可随时获取对应的节点。

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