如何在React中以编程方式更新Input元素的value值？

方法一：克隆元素并附加Ref（推荐） #

你可以通过React.cloneElement复制传入的JSX元素，给它添加ref属性，这样就能在元素渲染后拿到原生DOM节点：

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

const MyComponent = ({ myInput }: { myInput: JSX.Element }) => {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    const timer = setTimeout(() => {
      if (inputRef.current) {
        // 更新值
        inputRef.current.value = "new value";
        // 触发change事件，确保react-hook-form能捕获到
        inputRef.current.dispatchEvent(new Event('change', { bubbles: true }));
      }
    }, 15000);

    // 清理定时器，避免内存泄漏
    return () => clearTimeout(timer);
  }, []);

  // 克隆传入的input元素，附加ref
  return cloneElement(myInput, { ref: inputRef });
};

原理：cloneElement会保留原元素的所有属性和子节点，同时允许你添加/覆盖属性（这里就是添加ref）。当元素渲染到DOM后，inputRef.current就会指向原生的HTMLInputElement，之后就能直接操作它并触发事件。

方法二：通过容器查询DOM（适配复杂嵌套场景） #

如果传入的是第三方自定义组件，内部嵌套了input，没法直接通过cloneElement加ref，你可以把它放到一个容器里，通过容器的ref查询内部的input元素：

import { useEffect, useRef } from 'react';

const MyComponent = ({ myInput }: { myInput: JSX.Element }) => {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const timer = setTimeout(() => {
      if (containerRef.current) {
        // 根据实际结构调整选择器，确保能找到目标input
        const inputElement = containerRef.current.querySelector('input') as HTMLInputElement;
        if (inputElement) {
          inputElement.value = "new value";
          inputElement.dispatchEvent(new Event('change', { bubbles: true }));
        }
      }
    }, 15000);

    return () => clearTimeout(timer);
  }, []);

  return (
    <div ref={containerRef}>
      {myInput}
    </div>
  );
};

关键注意点 #

• 触发change事件时必须设置bubbles: true，否则react-hook-form的监听逻辑无法捕获到事件。
• 一定要清理定时器，避免组件卸载后定时器仍执行导致的内存泄漏。

内容的提问来源于stack exchange，提问作者Big Dom