如何判断onBeforeInput与onInput事件关联并获取对应eventBefore？

一、如何判断两个事件是同一输入操作触发的？ #

• 从触发逻辑看：onBeforeInput 是浏览器处理用户输入、更新DOM内容之前触发的事件，onInput则是内容更新完成后触发，二者绑定在同一元素上时，严格遵循「先beforeInput，后input」的顺序，必然对应同一次用户输入操作（比如打字、粘贴、删除内容等）。
• 可通过事件属性验证：在两个回调中打印event.timeStamp，同一输入操作触发的两个事件时间戳会非常接近（误差仅为浏览器处理的正常延迟）；同时，两次事件的target指向完全相同的DOM元素。
• 从触发场景看：只有当用户操作会改变输入框内容或选区时，才会同时触发这两个事件，无输入操作时不会单独触发其中一个。

二、在onInput中获取对应的onBeforeInput事件对象 #

React没有提供直接关联两个事件对象的API，我们可以用useRef临时存储onBeforeInput的事件对象——useRef的存储不会触发组件重渲染，适合这种临时的事件数据传递：

修改后的代码示例：

import { useRef } from 'react';

export const MyApp = () => {
    const beforeInputEventRef = useRef(null);

    const onBeforeInput = (eventBefore) => {
        // 将beforeInput事件对象存入ref
        beforeInputEventRef.current = eventBefore;
        console.log(eventBefore);
    };

    const onInput = (event) => {
        console.log(event);
        // 从ref中取出对应的beforeInput事件对象
        const eventBefore = beforeInputEventRef.current;
        if (eventBefore) {
            // 直接使用所需的selectionStart属性
            console.log('beforeInput阶段的选区起始位置:', eventBefore.selectionStart);
        }
        console.log(eventBefore);
    };

    return (
        <textarea onBeforeInput={onBeforeInput} onInput={onInput}/>
    );
};

额外注意点： #

• 如果组件内有多个输入框，需要为每个输入框单独创建useRef，避免不同输入框的事件对象互相覆盖。
• 若担心内存问题，可在组件卸载或输入框失焦时，将beforeInputEventRef.current置为null。

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