React中如何获取被外部库修改的DOM输入元素的当前最新值？

方案1：主动触发时获取最新值 #

适用于提交表单、点击按钮等主动触发场景，直接通过ref读取DOM原生属性即可：

import { useRef } from 'react';

function MyComponent() {
  const inputRef = useRef(null);

  // 示例：点击按钮时获取最新值
  const handleFetchValue = () => {
    // 取不到值时默认返回null，匹配初始值要求
    const latestValue = inputRef.current?.value || null;
    // 此处写后续业务逻辑
    console.log('input最新值：', latestValue);
  };

  return (
    <div>
      {/* 将ref绑定到外部库控制的input元素上 */}
      <input ref={inputRef} />
      <button onClick={handleFetchValue}>获取input值</button>
    </div>
  );
}

方案2：实时监听值变化 #

如果需要在值被外部库修改的第一时间感知变化，可以绑定原生input事件实现监听：

import { useRef, useEffect } from 'react';

function MyComponent() {
  const inputRef = useRef(null);

  useEffect(() => {
    const inputDom = inputRef.current;
    if (!inputDom) return;

    const handleValueChange = () => {
      const latestValue = inputDom.value || null;
      // 此处写值变化后的业务逻辑，比如同步到React内部state
      console.log('input值已更新：', latestValue);
    };

    // 绑定原生input事件
    inputDom.addEventListener('input', handleValueChange);

    // 组件卸载时清除监听，避免内存泄漏
    return () => {
      inputDom.removeEventListener('input', handleValueChange);
    };
  }, []);

  return <input ref={inputRef} />;
}

注意事项 #

• 不要为该input配置value属性和受控逻辑，避免和外部库的DOM操作产生冲突，保持其为不受控组件即可
• 如果外部库修改值时未触发原生input事件，可以改用MutationObserver监听input元素的value属性变更，兼容特殊场景

内容的提问来源于stack exchange，提问作者Paras Buda