如何在 React/typescript 中访问嵌套 DOM 元素的文本值

Question

访问嵌套 div 文本值的最佳方法是什么：它需要在父 div 上可点击。

<div className='Outer'>
   <div className='Inner'>
      <p className='value'>Text Value</p>
   </div>
</div>

我想访问 value = 'Text Value' 的文本；

我想过将事件传递给函数，例如：

const handleProps = (e: React.MouseEvent<HTMLElement>) => {
    e.preventDefault();
    console.log(e.currentTarget)
}

但这给出了一个 DOM 节点列表，我不确定这是否是 React 中的最佳方式？

我已经想到了Refs但从我所见，更多的是用于输入等，除非我误解了。

Answer 1

import {useRef} from React;

...
const pValue = useRef("");

...
<p ref={pValue} className='value'>Text Value</p>

...
// when can take value: innerHtml, textContent or innerText
console.log(pValue.current);//element
console.log(pValue.current.textContent);