如何模拟真实键盘输入触发React InputField的onChange事件？

某网站通过React创建了手机号输入框并绑定onChange函数，代码如下：

o.createElement(k.InputField, {
    label: "Enter mobile number",
    variant: "secondary",
    value: i.trim(),
    disabled: v,
    InputProps: {
        onChange: ({ target: { value: e } }) => {
            alert("testing");
        },
        maxLength: 10,
        autoFocus: !0,
        id: "mobileNum",
    },
    error: Ve.mobileNumberValidationMessage(f, String(i)),
    before: o.createElement(k.Text, { variant: "body", color: "text.2" }, "+", 91),
    css: Ct,
})

尝试通过原生JS修改输入框值并触发各类事件，仅手动键盘输入时会弹出alert，代码如下：

const inputElement = document.getElementById("mobileNum");

// Step 2: Set its value programmatically
const newValue = "9"; // Example new value
inputElement.value = newValue;
const eventTypes = [
    "input",        // Input event when the value of an input element changes
    "change",       // Change event when the value of an input element changes and loses focus
    "keydown",      // Keydown event when a key is pressed down
    "keyup",        // Keyup event when a key is released
    "keypress",     // Keypress event when a key is pressed
    "click",        // Click event when a mouse click occurs
    "dblclick",     // Double click event when a mouse double click occurs
    "mousedown",    // Mousedown event when a mouse button is pressed down
    "mouseup",      // Mouseup event when a mouse button is released
    "mousemove",    // Mousemove event when the mouse pointer is moved
    "mouseover",    // Mouseover event when the mouse pointer enters an element
    "mouseout",     // Mouseout event when the mouse pointer leaves an element
    "wheel",        // Wheel event when the mouse wheel is scrolled
    "contextmenu",  // Contextmenu event when the right mouse button is clicked
    "touchstart",   // Touchstart event when a finger touches the screen
    "touchend",     // Touchend event when a finger is removed from the screen
    "touchmove",    // Touchmove event when a finger is dragged across the screen
    "touchcancel",  // Touchcancel event when a touch event is interrupted
    "focus",        // Focus event when an element gains focus
    "blur",         // Blur event when an element loses focus
    "submit",       // Submit event when a form is submitted
    "reset",        // Reset event when a form is reset
    "resize",       // Resize event when the window or element is resized
    "scroll"        // Scroll event when the window or element is scrolled
];

eventTypes.forEach(eventType => {
    const event = new InputEvent(eventType, {
        inputType: "insertText",
        data: newValue,
        bubbles: true,
        composed: true
    });
    inputElement.dispatchEvent(event);
});

设置值后输入框内容变化，但未触发onChange的alert，仅手动输入或按退格键时才触发。请问如何模拟真实打字行为触发该事件？

React的表单组件（比如你用的InputField）依赖合成事件系统处理onChange，直接修改DOM值+触发普通事件无法被React的状态监听捕获，需要模拟更贴近真实输入的流程：

• 方法一：模拟完整的键盘输入流程
  先确保输入框获得焦点，再依次触发键盘按下、输入、抬起的事件，让React的合成事件系统感知到值变化：

const inputElement = document.getElementById("mobileNum");
const newValue = "9";

// 先聚焦输入框
inputElement.focus();

// 模拟键盘按下事件
const keyDownEvent = new KeyboardEvent("keydown", {
    key: newValue,
    code: `Digit${newValue}`,
    bubbles: true,
    composed: true,
    cancelable: true
});
inputElement.dispatchEvent(keyDownEvent);

// 修改DOM值并触发input事件（核心，让React捕获值变化）
inputElement.value = newValue;
const inputEvent = new InputEvent("input", {
    inputType: "insertText",
    data: newValue,
    bubbles: true,
    composed: true
});
inputElement.dispatchEvent(inputEvent);

// 模拟键盘抬起事件
const keyUpEvent = new KeyboardEvent("keyup", {
    key: newValue,
    code: `Digit${newValue}`,
    bubbles: true,
    composed: true
});
inputElement.dispatchEvent(keyUpEvent);

• 方法二：直接调用React绑定的onChange函数
  通过DOM元素的React内部属性，直接找到并调用组件绑定的onChange事件处理函数：

const inputElement = document.getElementById("mobileNum");
// 获取React内部属性（不同版本属性名可能略有差异，比如__reactProps$xxx）
const reactProps = inputElement._reactProps || inputElement.__reactProps$;
if (reactProps?.onChange) {
    // 模拟React合成事件结构传入参数
    reactProps.onChange({
        target: { value: "9" }
    });
}

注意：此方法依赖React内部实现，不同版本可能有变化，但调试或自动化测试场景下实用性强。

内容的提问来源于stack exchange，提问作者Gracie williams