React编译之后如何修改input控件的值

问题: 因为React是通过setState方法改变值来影响页面展示的，所以直接修改页面值，并不能让React意识到state已经变化了。

 

修改自chatgpt 4o提供的方法，20241129测试有效。

 

// 第一个参数为原生组件,第二个参数为新值
function setReactInputValue(input, value) {
    const lastValue = input.value;
    input.value = value;
    
    // 创建一个新的事件，模仿用户输入
    const event = new Event('input', { bubbles: true });
    // 强制触发 React 的更新
    const tracker = input._valueTracker;
    if (tracker) {
        tracker.setValue(lastValue);
    }
    input.dispatchEvent(event);
}


////////
// 示例
const amountInput = document.getElementById('orderMarketInput');
setReactInputValue(amountInput, 100);