中文输入法导致的高频事件

平时如果使用输入法，使用的不是三方组件而是原生的 input 时，会出现一个中文输入法出现的错误输出问题，也就是未合成汉字的拼音，也会跑到输入框回调中，这样我们的输入回调就会很乱

如下所示

<input type='text' />

const input = document.querySelector("input");
input?.addEventListener("input", (e: any) => {
    console.log(e.target.value);
});

实际上出现上面的问题，就是汉字输入会用到一个合成事件（毕竟要先输入拼音才能生成汉子），因此我们可以通过合成事件回调，来处理合成文本的问题

下面是通过添加监听事件 compositionstart、compositionend 来处理合成事件，并且合成事件结束后，如果封装组件此时可以保存和回调文本

...isComposition

<input type='text' />

const input = document.querySelector("input");
input?.addEventListener("input", (e: any) => {
    if (!isComposition) {
        console.log(e.target.value);
    }
});
input?.addEventListener("compositionstart", (e: any) => {
    isComposition = true;
});
input?.addEventListener("compositionend", (e: any) => {
    isComposition = false;
    console.log(e.target.value);
});

当然有些可能直接使用框架给定的回调，实际上和添加监听是一个效果，只不过不需要手动移除监听罢了

<input
    type="text"
    onInput={(e: any) => {
        if (!isComposition) {
            console.log(e.target.value);
        }
    }}
    onCompositionStart={() => {
        isComposition = true;
    }}
    onCompositionEnd={(e: any) => {
        isComposition = false;
        console.log(e.target.value);
    }}
/>