WordPress中如何用jQuery/JS获取React渲染的输入框变化值？

问题根源 #

React控制的表单元素，其value更新是通过React状态同步完成的，不会触发原生change/keyup等用户输入事件；同时React重新渲染时可能替换DOM元素，导致直接绑定的事件失效。以下是三种可行方案：

方案1：使用MutationObserver监听属性变化（推荐） #

直接监听隐藏输入框的value属性变化，这是最可靠的方式，能精准捕获React对DOM属性的修改：

jQuery(function($) {
  const targetEl = document.getElementById('mf-input-calculation-2b21e15');
  if (!targetEl) return;

  // 创建属性变化观察者
  const valueObserver = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      if (mutation.attributeName === 'value') {
        const currentValue = targetEl.value;
        console.log('计算值已更新:', currentValue);
        // 在这里执行你的自定义计算逻辑
      }
    });
  });

  // 配置观察规则：仅监听value属性变化
  valueObserver.observe(targetEl, {
    attributes: true,
    attributeFilter: ['value']
  });

  // 页面卸载时清理观察者，避免内存泄漏
  $(window).on('unload', () => valueObserver.disconnect());
});

方案2：事件委托到父容器（兼容动态渲染元素） #

如果元素是React动态注入的，通过事件委托绑定到更高层级的父元素（比如body或表单容器），同时监听React可能手动触发的input事件：

jQuery(function($) {
  // 委托到body，确保动态生成的元素也能触发事件
  $('body').on('input change', '#mf-input-calculation-2b21e15', function() {
    const currentValue = $(this).val();
    console.log('计算值已更新:', currentValue);
    // 自定义计算逻辑
  });
});

注意：若React未手动触发input/change事件，该方案可能无效，优先使用方案1。

方案3：修复轮询逻辑（备选） #

若以上方案无法使用，可修复轮询代码，仅在值变化时执行逻辑，避免无效触发：

jQuery(function($) {
  let lastTotalValue = '';
  setInterval(() => {
    const $totalSpan = $('.mf-input-calculation-total');
    if (!$totalSpan.length) return;

    const currentValue = $totalSpan.text().trim();
    // 仅当值发生变化时执行逻辑
    if (currentValue !== lastTotalValue) {
      lastTotalValue = currentValue;
      console.log('总额已更新:', currentValue);
      // 自定义计算逻辑
    }
  }, 1000); // 可调整轮询间隔，比如1000ms=1秒
});

轮询会消耗浏览器资源，仅作为最后备选方案。

额外提示 #

如果输入框的ID是动态生成的（比如后缀2b21e15为随机值），可改用类选择器$('.mf-input.mf-input-calculation')替代ID选择器，避免ID变化导致代码失效。

内容的提问来源于stack exchange，提问作者George Richardson