如何在React中获取被点击元素的文本内容？

你现在的代码里只有第一个按钮能拿到值，是因为只有它设置了value属性，第二个按钮没设，所以e.target.value是undefined。要获取按钮显示的文本（innerText），可以用下面几种方法：

方法1：通过事件对象的currentTarget获取innerText #

currentTarget始终指向绑定事件的元素（也就是按钮本身），比target更可靠——避免按钮内部嵌套元素时，target意外指向子元素的情况。修改点击事件处理函数即可：

import { useState } from 'react';

function App() {
  const [text, setText] = useState("");

  const handleButtonClick = (e) => {
    const buttonText = e.currentTarget.innerText;
    console.log(buttonText);
    setText(buttonText);
  };

  return (
    <>
      <div className="buttons">
        <button onClick={handleButtonClick}>buttonOne</button>
        <button onClick={handleButtonClick}>buttonTwo</button>
      </div>
      <p>{text}</p>
    </>
  )
}

方法2：直接给点击事件传参（更直观） #

不需要依赖DOM元素的属性，直接把按钮文本作为参数传给处理函数，代码可读性更高：

import { useState } from 'react';

function App() {
  const [text, setText] = useState("");

  const handleButtonClick = (buttonText) => {
    console.log(buttonText);
    setText(buttonText);
  };

  return (
    <>
      <div className="buttons">
        <button onClick={() => handleButtonClick("buttonOne")}>buttonOne</button>
        <button onClick={() => handleButtonClick("buttonTwo")}>buttonTwo</button>
      </div>
      <p>{text}</p>
    </>
  )
}

方法3：利用按钮的dataset属性（适合文本动态生成的场景） #

如果按钮文本是动态生成的，也可以给按钮加data-*自定义属性，再通过事件对象获取：

import { useState } from 'react';

function App() {
  const [text, setText] = useState("");
  const buttons = ["buttonOne", "buttonTwo"];

  const handleButtonClick = (e) => {
    const buttonText = e.currentTarget.dataset.text;
    console.log(buttonText);
    setText(buttonText);
  };

  return (
    <>
      <div className="buttons">
        {buttons.map(btnText => (
          <button key={btnText} data-text={btnText} onClick={handleButtonClick}>
            {btnText}
          </button>
        ))}
      </div>
      <p>{text}</p>
    </>
  )
}

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