标签 react 下的文章

// 方案1:针对React的完整事件模拟
async function simulateReactInput(element, text) {
    if (!element) return;
    
    // 1. 先聚焦
    element.focus();
    await sleep(50);
    
    // 2. 清空现有内容
    const descriptor = Object.getOwnPropertyDescriptor(element, 'value');
    if (descriptor && descriptor.set) {
        descriptor.set.call(element, '');
    }
    
    // 3. 触发React的onChange事件链
    ['focus', 'mousedown', 'mouseup', 'click'].forEach(eventName => {
        element.dispatchEvent(new MouseEvent(eventName, {
            bubbles: true,
            cancelable: true,
            view: window
        }));
    });
    
    // 4. 逐个字符输入(更真实的React方式)
    for (let i = 0; i < text.length; i++) {
        const char = text[i];
        
        // 设置值
        element.value += char;
        
        // React主要监听input事件,但要使用正确的属性
        const inputEvent = new InputEvent('input', {
            bubbles: true,
            cancelable: true,
            inputType: 'insertText',
            data: char,
            isComposing: false
        });
        
        // 触发input事件(React监听的)
        element.dispatchEvent(inputEvent);
        
        // 同时触发React的onChange事件
        const changeEvent = new Event('change', {
            bubbles: true,
            cancelable: true
        });
        element.dispatchEvent(changeEvent);
        
        // 触发键盘事件(可选)
        const keyDownEvent = new KeyboardEvent('keydown', {
            key: char,
            code: `Key${char.toUpperCase()}`,
            charCode: char.charCodeAt(0),
            keyCode: char.charCodeAt(0),
            which: char.charCodeAt(0),
            bubbles: true
        });
        element.dispatchEvent(keyDownEvent);
        
        await sleep(30 + Math.random() * 50);
    }
    
    // 5. 触发blur事件(React可能在这里进行验证)
    setTimeout(() => {
        element.blur();
        element.dispatchEvent(new Event('blur', { bubbles: true }));
    }, 100);
    
    return true;
}

const inputElement = document.getElementById('declarePrice-0');

// 创建一个新的事件对象并赋值新的值
const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;
nativeInputValueSetter.call(inputElement, '100.00'); // 设定新的值

// 创建并触发 'input' 事件
const inputEvent = new Event('input', { bubbles: true });
inputElement.dispatchEvent(inputEvent); // 触发 React 的 onChange