如何獲取div onClick的innerHTML

Question

在下面的代碼中，如何獲取onClick事件的div內的文本？

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

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

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

Answer 1

您可以將event傳遞給您的onClick處理程序並獲取 interHTML/innerText，

<div onClick={(e) => console.log(e.target.innerHTML)}> Hello world </div>;

Answer 2

我不確定您對使用“this”的承諾程度，但您可以通過以下方式輕松獲取文本：

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

class TestTag extends React.Component {
  render() {
    return <div id = "maindiv" onClick={() => console.log(document.getElementById("maindiv").innerHTML)}> Hello world </div>;
  }
}

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