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

Question

What would be the best way to access a nested div text value: It needs to be clickable on the parent div.

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

I want to access the text of value = 'Text Value';

I have thought of passing the event into the function something like:

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

But this gives a list of DOM nodes and I'm not sure if thats the best way in React?

I have thought of Refs but from what I can see that is more for inputs etc, unless I have misunderstood.

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);