如何在 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);