React中如何在selected函数内获取点击Div的文本内容？

问题代码 #

const questions = (props) => {
  const { question, options, id } = props.quiz;

  const selected = (e) => {
    e.target.children[0].checked = true;
    console.log(e.target);
  };

  return (
    <div className="bg-gray-200 p-6 m-10 rounded-md">
      <div className="font-bold text-xl text-slate-600">{question}</div>
      <div className="grid grid-cols-2 mt-4">
        {options.map((option) => (
          <div className="border-2 border-solid border-gray-400 rounded  text-gray-500 m-1">
            <div className="flex cursor-pointer p-3" id={id} onClick={selected}>
              <input type="radio" className="mr-2" name="name" />
              {option}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default questions;

问题描述 #

当在selected函数中执行console.log(e.target)时，返回的是被点击的Div，请问如何在该selected函数内获取该Div的文本内容？

解决方法 #

• 方法一：直接读取DOM文本属性
  利用textContent或innerText获取文本，再用trim()去除多余空白：

  const selected = (e) => {
    e.target.children[0].checked = true;
    // 使用textContent获取所有文本
    const optionText = e.target.textContent.trim();
    // 或者用innerText获取可见文本
    // const optionText = e.target.innerText.trim();
    console.log(optionText);
  };
  

• 方法二：直接传递渲染时的option数据（推荐）
  这更符合React数据驱动的理念，避免直接操作DOM：

  // 修改渲染时的onClick，传入当前option
  {options.map((option) => (
    <div className="border-2 border-solid border-gray-400 rounded  text-gray-500 m-1">
      <div className="flex cursor-pointer p-3" id={id} onClick={() => selected(option)}>
        <input type="radio" className="mr-2" name="name" />
        {option}
      </div>
    </div>
  ))}
  
  // 改写selected函数
  const selected = (optionText) => {
    console.log(optionText);
    // 注：单选框选中逻辑更建议用React状态管理，比如useState存储选中值，而非直接操作DOM
  };
  

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