react： input 输入框中文onChange事件异常问题& 对input输入进行防抖处理

原创

已于 2023-02-25 22:24:14 修改 · 5.3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

于 2023-02-25 22:21:45 首次发布

文章讲述了在React应用中，当用户使用中文输入法时，onChange事件会因未确认输入就触发的问题。通过利用onCompositionStart、onCompositionUpdate和onCompositionEnd事件，可以判断中文输入状态，避免在输入过程中触发搜索。同时，结合防抖(debounce)函数，可以在中文输入结束后再进行搜索操作，优化用户体验。

当我们使用Input时，我们可能会遇到一个问题，比如需要对用户输入的内容进行搜索时，当用户处于中文输入时，明明没有对内容进行确认，为什么会触发了onChange事件呢？

比如以下场景，中文一边输入另外一边onChange事件就已经被触发了，这样显然是不符合我们的需求的。无论我们对change事件如何做防抖和节流，当用户处于中文输入还没进行确认时，搜索请求就已经发送了。

const NewInput = () => {
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    console.log(e.target.value);
  };

  return <input onChange={handleChange} />;
};

export default NewInput;