问题

在我的网页中，有一个通过 iframe 加载的表单。

我可以通过 ref 访问这个 iframe：

const formRef = useRef(null)

<FormIframe ref={formRef} />

在 iframe 中将返回一堆 JSX，我知道其中有一个具有 id 为 "first_name" 的元素：

<input id="first_name" />

如何使用 ref 访问该元素，以便我可以对其进行操作？以下方法不起作用：

const el = formRef?.current?.getElementById("first_name")

我还尝试在 useEffect 中使用 document 和 getElementById，但也没有成功。它返回了 null：

useEffect(() => {
  if (document) {
    const el = document.getElementById("first_name")
    console.log(el)
  }
}, [])

有什么想法？

const formRef = useRef(null)

<FormIframe ref={formRef} />

<input id="first_name" />

const el = formRef?.current?.getElementById("first_name")

useEffect(() => {
  if (document) {
    const el = document.getElementById("first_name")
    console.log(el)
  }
}, [])

答案1

得分: 1

以下是翻译好的代码部分：

const iframeElement = formRef.current;
const iframeWindow = iframeElement.contentWindow;
const elementInIframe = iframeWindow.document.getElementById('first_name');

 const iframeElement = formRef.current;
 const iframeWindow = iframeElement.contentWindow;
 const elementInIframe = iframeWindow.document.getElementById('first_name');

答案2

得分: 1

问题在于你的表单位于一个 iframe 内。

在处理 iframe 时，访问其内部元素与访问主文档中的元素有些不同。在你的情况下，由于你有一个对 iframe 的引用（formRef），你可以使用 contentWindow 属性来访问 iframe 内部的文档，然后通过其 ID 检索元素。以下是如何修改你的代码来实现这一点的方式：

const el = formRef?.current?.contentWindow?.document.getElementById("first_name");

你还可以查看以下链接：
https://stackoverflow.com/questions/62521827/get-iframe-elements-in-react-using-ref
https://stackoverflow.com/questions/61542709/react-accessing-inline-created-iframe-elements

这些链接中有相关的想法。

const el = formRef?.current?.contentWindow?.document.getElementById("first_name");

答案3

得分: 1

从React包中导入useRef钩子到你的组件文件顶部：

import React, { useRef } from 'react';

在你的函数组件中，使用useRef钩子声明一个ref变量：

const myRef = useRef();

将ref分配给你想要引用的JSX元素，使用ref属性：

<div ref={myRef}>这是我想要找到的元素</div>

现在你可以使用ref的current属性访问引用的元素：

const element = myRef.current;

以下是演示这些步骤的示例：

import React, { useRef } from 'react';

function MyComponent() {
  const myRef = useRef();

  const handleClick = () => {
    const element = myRef.current;
    if (element) {
      // 在这里访问或操作元素
      console.log(element.textContent);
    }
  };

  return (
    <div>
      <div ref={myRef}>这是我想要找到的元素</div>
      <button onClick={handleClick}>查找元素</button>
    </div>
  );
}

在上面的示例中，myRef用于引用

import React, { useRef } from 'react';

const myRef = useRef();

<div ref={myRef}>This is the element I want to find</div>

const element = myRef.current;

import React, { useRef } from 'react';

function MyComponent() {
  const myRef = useRef();

  const handleClick = () => {
    const element = myRef.current;
    if (element) {
      // Access or manipulate the element here
      console.log(element.textContent);
    }
  };

  return (
    <div>
      <div ref={myRef}>This is the element I want to find</div>
      <button onClick={handleClick}>Find Element</button>
    </div>
  );
}