React - 使用 Ref 获取 DOM 元素文本值

Question

这应该是一个简单的操作，但我一直在网上找到的所有内容都是如何使用 React ref.

获取 'input value'

我需要知道如何从像

这样的DOM元素中获取文本值

<p>hello world</p>

得到'hello world'

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

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

谁能给我指出正确的方向？

谢谢。

Answer 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 不是为第一次渲染设置的 - 因此它是未定义的。

React - 使用 Ref 获取 DOM 元素文本值

React - get DOM element TEXT value with Ref

reactjs

ref