React - 使用 Ref 获取 DOM 元素 TEXT 值答案

【问题标题】：React - get DOM element TEXT value with RefReact - 使用 Ref 获取 DOM 元素 TEXT 值
【发布时间】：2021-05-29 06:05:25
【问题描述】：

这应该是一个简单的操作，但我一直在网上找到的所有内容都是如何使用 react ref 获取“输入值”。

我需要知道如何从 DOM 元素中获取 TEXT 值，例如

<p>hello world</p>

然后得到'hello world'

我已经正确设置了 ref，我可以使用 refName.current 记录完整的 html 标记。

为了获取文本，我尝试了 refName.value、refName.current.value refName.text、refName.current.text()、refName.innerText.. 等。

谁能指出我正确的方向？

谢谢。

【问题讨论】：

innerText 应该可以工作，但你为什么需要这个？您能否向我们展示一个实际上不起作用的 sn-p？
current.innerText 还是 current.value.innerText？
current.innerText 有效，我一定尝试将其称为 current.innerText()。知道为什么当我开始在 VS Code 中输入它时，它没有作为一种方法出现吗？

标签： reactjs ref

【解决方案1】：

您可以通过ref.current.innerText访问文本

例如（sandbox）：

  const ref = useRef();

  useEffect(() => {
    console.log(ref.current?.innerText || "ref not set!");
  }, []);

  return <p ref={ref}>Hello world</p>;

请记住，ref.current 不是为第一次渲染设置的 - 所以它在开始时是未定义的。

【讨论】：