在React页面中嵌入html实现读取和修改react原生输入框内容：

读取：

直接通过选择器来获取value，例如

const itemInput = document.getElementById(elementId);
const container = itemInput.closest('.ant-select-selector');
const valueSpan = container.querySelector('.ant-select-selection-item');
return valueSpan.innerText;

修改：

尝试：

document.getElementById( 'total' )，虽然页面上会显示修改的内容，但是点击提交时，内容会被清空，

由于 Ant Design 的 InputNumber 是一个受控组件（Controlled Component）。虽然我们通过 document.getElementById('total').value = total 可以修改 DOM 中的值，但这个修改并没有同步到 React 的状态管理逻辑中，因此 在提交表单或重新渲染时，React 会用它自己的状态重新覆盖这个值。

正确的解决方案

我们需要使用 React 的事件机制（或组件的 API）来触发值的更改，确保 React 知道值被修改了。

如果我们不能改动 React 代码（比如只是嵌入一段 HTML），可以通过 触发原生的 input 或 change 事件 来模拟用户输入，让 React 捕捉到变化。

✅ 第一种方式（模拟用户输入）：

function setReactInputValue(id, newValue) {
  const input = document.getElementById(id);
  if (!input) return;

  // 设置值
  input.value = newValue;

  // 创建一个新的输入事件，带 bubbles 让 React 能捕捉到
  const event = new Event('input', { bubbles: true });

  // 派发事件（关键步骤）
  input.dispatchEvent(event);
}

✅ 兼容性更强的方式（React 17 以上使用）

有些版本的 React 需要用更“原始”的方式触发值变化：

function setReactInputValueBySetter(id, newValue) {
  const input = document.getElementById(id);
  if (!input) return;

  // 创建原生的 setter（兼容 React 的机制）
  const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;
  nativeInputValueSetter.call(input, newValue);

  // 触发 input 事件
  const ev = new Event('input', { bubbles: true });
  input.dispatchEvent(ev);
}

🚫 为什么直接 input.value = x 不行

React 的受控组件是由 state 控制的，不是 DOM 控制的。直接修改 DOM 的值，React 会在下次渲染时把它“改回来”。除非你用 React 的事件机制告知状态变了，React 才会认这个修改。

测试

setReactInputValue( 'total', 12345) 不可用

setReactInputValueBySetter 可用

尝试了下第一种方式对我来说不起作用，不知道是不是react版本的问题，毕竟我也没有这个平台的源代码，是新加坡同事维护的。

另外注意要去掉注释，因为组件会把换行符去掉，有注释的话，//后面的代码都会被注释掉

总结

  • React 控制了输入框的值，不能只修改 DOM。

  • 要通过触发 input 或 change 事件让 React 监听到变更。

  • 推荐通过 dispatchEvent + value setter 修改。

如需更复杂的双向控制，建议将按钮功能也写在 React 内部（如通过 props 或 context 传入修改函数），这样更规范。但如果只能操作 DOM，这就是最稳妥的方法。

封装了两个函数，可以根据自己的实际情况修改使用：

function getOptionValue(elementId) {
    const itemInput = document.getElementById(elementId);
    const container = itemInput.closest('.ant-select-selector');
    const valueSpan = container.querySelector('.ant-select-selection-item');
    return valueSpan.innerText;
};

function setReactInputValueBySetter(id, newValue) {
    const inputEle = document.getElementById(id);
    console.log('setReactInputValueBySetter', id, newValue, inputEle);
    if (!inputEle) return;
    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;
    nativeInputValueSetter.call(inputEle, newValue);
    const ev = new Event('input', {
        bubbles: true
    });
    inputEle.dispatchEvent(ev);
};