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

Posted 2023-02-25

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

【英文标题】：How to access text value of nested DOM element in React/typescript

【发布时间】：2021-10-18 13:51:40

【问题描述】：

访问嵌套 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，但据我所知，这更多的是用于输入等，除非我误解了。

【问题讨论】：

Refs 在这里似乎是不错的选择。

您能否详细说明使用 Refs 的最佳方式是什么？

【参考方案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);