如何使用 useRef 在 React 中获取 DOM 元素引用

import React, { useRef } from 'react';

function MyComponent() {
  // 1. 声明一个 ref 变量
  const contentDivRef = useRef(null);

  const handleAccessElement = () => {
    // 4. 通过 .current 属性访问 DOM 元素
    const element = contentDivRef.current;
    if (element) {
      console.log('引用的元素:', element);
      console.log('元素内容:', element.textContent);
      // 可以在这里对元素进行任何 DOM 操作
      element.style.backgroundColor = 'yellow';
    } else {
      console.log('元素尚未渲染或引用失效。');
    }
  };

  return (
    <div>
      {/* 3. 将 ref 绑定到 JSX 元素 */}
      <div ref={contentDivRef} style={{ padding: '10px', border: '1px solid gray' }}>
        这是我们想要通过 useRef 访问的 DOM 元素。
      </div>
      <button onClick={handleAccessElement}>访问并操作元素</button>
    </div>
  );
}

export default MyComponent;

import React, { useRef } from 'react';

function MyFormContainer() {
  const formContainerRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    const container = formContainerRef.current;
    if (container) {
      // 在引用的父元素内部查找 ID 为 "first_name" 的子元素
      const firstNameInput = container.querySelector('#first_name');
      const emailInput = container.querySelector('input[type="email"]'); // 查找 email 类型的 input

      if (firstNameInput) {
        console.log('名:', firstNameInput.value);
        firstNameInput.style.border = '2px solid green';
      }
      if (emailInput) {
        console.log('邮箱:', emailInput.value);
      }
    }
  };

  return (
    <form ref={formContainerRef} onSubmit={handleSubmit} style={{ border: '1px solid #ccc', padding: '20px' }}>
      <label htmlFor="first_name">名:</label>
      <input type="text" id="first_name" defaultValue="张" /><br/><br/>

      <label htmlFor="last_name">姓:</label>
      <input type="text" id="last_name" defaultValue="三" /><br/><br/>

      <label htmlFor="email">邮箱:</label>
      <input type="email" id="email" defaultValue="zhangsan@example.com" /><br/><br/>

      <button type="submit">提交表单</button>
    </form>
  );
}

export default MyFormContainer;

import React, { useRef, useEffect } from 'react';

function IframeContentAccess() {
  const iframeRef = useRef(null);

  useEffect(() => {
    const iframeElement = iframeRef.current;
    if (iframeElement) {
      // 确保 iframe 内容已加载
      iframeElement.onload = () => {
        try {
          const iframeDoc = iframeElement.contentWindow.document;
          const targetElement = iframeDoc.getElementById('first_name');
          if (targetElement) {
            console.log('Iframe 内部的元素:', targetElement);
            targetElement.style.backgroundColor = 'lightblue';
            targetElement.value = '已修改';
          } else {
            console.log('未在 iframe 内部找到 ID 为 "first_name" 的元素。');
          }
        } catch (e) {
          console.error('无法访问 iframe 内容，可能存在跨域问题:', e);
        }
      };
    }
  }, []); // 空数组表示只在组件挂载时运行一次

  return (
    <div>
      <h2>Iframe 内容访问示例</h2>
      <iframe
        ref={iframeRef}
        title="Embedded Form"
        srcDoc={`
          <form>
            <label for="first_name">名:</label>
            <input type="text" id="first_name" value="原始值" /><br/><br/>
            <label for="last_name">姓:</label>
            <input type="text" id="last_name" value="原始值" />
          </form>
        `}
        style={{ width: '100%', height: '200px', border: '1px solid blue' }}
      ></iframe>
      <p>请查看控制台输出和 iframe 内容变化。</p>
    </div>
  );
}

export default IframeContentAccess;