你知道Compositionstart和Compositionend事件吗，react 组件库之Input组件的坑

前言

Input组件大家都用过，是吧，但是你有没有想过这样一个场景，如下图，我正在搜索数据

你组件上注册了onChange事件，然后边输入，底下会显示你搜索相关的内容，

但是有一个问题就是，输入中文的时候，你比如打三国的三字，要先输入san然后才出现三

可问题来了，onChange事件监听的是san，已经开始搜索了，其实我们根本不想这样，我们想的是中文的话，等中文显示在输入框，也就是输入完“三”这个字的时候，才搜索。这个咋办

这就需要我们今天的主角Compositionstart和Compositionend事件出场了。

Compositionstart和Compositionend事件是啥

compositionstart 事件在用户开始进行非直接输入的时候触发，而在非直接输入结束，也即用户点选候选词或者点击「选定」按钮之后，比如按回车键，会触发 compositionend 事件。

举个例子，还是上面输入三这个字的过程，当你输入s的时候，已经打开了中文输入法，此时compositionstart事件触发了，当你输入完三并且确认的时候，compositionend事件触发。

好了，所以如果你用的组件库，Input组件没有优化这一项的话，也就是onChange事件在中文输入法下，应该返回的是中文输入完成，也就是compositionend事件完成的字符，而不是输入过程的字符，那么就需要组件封装一下这个逻辑了，如果封装，我们看下源码。

本来是打算解析完整的Input组件的，后来想想其实这个组件太简单了，就只讲一下其中的难点吧。

源码探析解决方案

首先Input组件如下

 <inputvalue={innerValue}onCompositionStart={handleCompositionStart}onCompositionEnd={handleCompositionEnd}onChange={handleChange}/> 

然后我们看下value属性的formatDisplayValue是什么

// 用来记录此时是否Compositionstart事件触发了，如果触发就置为true
// Compositionend结束就置为false
 const composingRef = useRef(false);
 // 暴露给const [value, onChange] = useState<string>('');
 const [composingValue, setComposingValue] = useState<string>('');
 // 如果启动了中文输入法，那么innerValue就是composingValue
 // composingValue就是中文输入的时候比如“三国”，你输入从“s”到“sanguo”，此时innerValue都是composingValue
 // 除了中文输入法外，innerValue都是value
 const innerValue = composingRef.current ? composingValue : value ?? ''; 

上面可以看到innerValue是最终渲染给input框的value，用户一般通过onChange事件获取值，所以 我们在中文输入的时候，只要不触发onChange事件是不是就好了！

关键啊！最重要的知识点就是Compositionstart事件触发了，代表正在输入中文，那么onChange事件就不要触发，所以我们接着把事件的代码补上

 // 开始输入中文的时候把 composingRef.current 置为truefunction handleCompositionStart(e: React.CompositionEvent<HTMLInputElement>) {composingRef.current = true;const {currentTarget: { value },} = e;}// 中文输入完毕，把composingRef.current置为false，并把此时输入完的值给handleChange（handleChange会触发onChange）function handleCompositionEnd(e: React.CompositionEvent<HTMLInputElement>) {if (composingRef.current) {composingRef.current = false;handleChange(e);}}

 function handleChange(e: React.ChangeEvent<HTMLInputElement> | React.CompositionEvent<HTMLInputElement>) {let { value: newStr } = e.currentTarget;// 当中文输入的时候，不触发onChange事件，触发setComposingValue只是为了让输入框同步你输入的textif (composingRef.current) {setComposingValue(newStr);} else {// 完成中文输入时同步一次 composingValuesetComposingValue(newStr);// 中文输入完毕，此时触发onChangeonChange(newStr, { e });}} 

好了，本文结束，其实里面还有两个细节，后面再写一篇文章说，就是我们input框传参，可以有defaultValue这个value是外部传入的，还有props传入的value，还有组件默认的defalut value，这3个值怎么写一个hooks去处理，还有就是你们知道input框有种类型是显示password吗，这种显示密码的input框，输入文字后显示的是…如下：

点击眼睛图标就能看到输入的文字了，这个是咋办到的。后面说，吃饭去了！

最后

最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。

有需要的小伙伴，可以点击下方卡片领取，无偿分享