本文共 500 字，大约阅读时间需要 1 分钟。

当我们在开发输入框时，通常会设置字数限制。然而，问题在于此时进行拼音输入时，拼音字符会一直触发onchange事件，这导致我们的判断逻辑失效。为了解决这个问题，我们需要更加精细地控制事件处理。

一种有效的方法是通过handleComposition事件来管理拼音输入。该事件分为三个阶段：compositionstart（开始拼写）、compositionupdate（正在拼写）和compositionend（完成拼写）。我们可以将字数限定逻辑放入compositionend事件中，确保在用户完成拼音输入后进行判断。

例如，在Input组件中添加以下处理函数：

handleComposition = (e) => {
    if (e.type === 'compositionend' && e.target.value.length > 10) {
        message.info('输入内容已达上限~请重新输入');
    }
};

在Input标签上绑定此函数，同时保留必要的事件处理：

这种方式不仅解决了拼音输入对事件处理的干扰，还为后续的输入验证提供了更精准的控制点。