React/TypeScript中点击父div时如何获取嵌套DOM元素的文本值

方案优先级说明 #

优先按照「状态驱动 > 事件DOM查询 > Ref绑定」的顺序选择方案，越靠前越符合React的设计理念。

方案1：状态驱动（最优推荐） #

React是数据驱动框架，文本内容本身应该保存在组件状态中，完全不需要操作DOM即可获取值：

import { useState } from 'react';

function DemoComponent() {
  // 直接将需要获取的文本存在状态中
  const [valueText, setValueText] = useState('Text Value');

  const handleOuterClick = () => {
    // 直接读取状态值即可，无任何DOM操作
    console.log(valueText);
  }

  return (
    <div className='Outer' onClick={handleOuterClick}>
      <div className='Inner'>
        <p className='value'>{valueText}</p>
      </div>
    </div>
  )
}

优势：性能最优、逻辑可预测、完全符合React单向数据流规范，是首选实现。

方案2：事件对象DOM查询（适合文本不受当前组件控制的场景） #

如果目标文本是第三方组件渲染、无法拿到对应状态，可以用你之前的事件方案补充子节点查询逻辑：

const handleProps = (e: React.MouseEvent<HTMLElement>) => {
  e.preventDefault();
  // 从当前触发事件的父容器出发，查询目标子节点
  const valueNode = e.currentTarget.querySelector('.value') as HTMLElement;
  const targetText = valueNode?.innerText || '';
  console.log(targetText);
}

适用场景：DOM结构不受当前组件控制，无需额外声明变量，代码量最少。注意加可选链判断避免节点不存在时报错。

方案3：Ref绑定（适合频繁读取文本的场景） #

你对Ref的理解有误：Ref不仅适用于输入框，可绑定任意DOM元素。如果需要频繁读取该文本值，用Ref比每次点击都查询DOM性能更高：

import { useRef } from 'react';

function DemoComponent() {
  // 给目标p标签绑定Ref
  const valueRef = useRef<HTMLParagraphElement>(null);

  const handleOuterClick = () => {
    const targetText = valueRef.current?.innerText || '';
    console.log(targetText);
  }

  return (
    <div className='Outer' onClick={handleOuterClick}>
      <div className='Inner'>
        <p className='value' ref={valueRef}>Text Value</p>
      </div>
    </div>
  )
}

适用场景：需要频繁操作/读取该节点的场景，单次点击读取不需要用这个方案。

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