react Input組件Compositionstart和Compositionend事件

更新時間：2022年11月29日 09:13:50 作者：孟祥_成都

這篇文章主要為大家介紹了Compositionstart和Compositionend事件之于react組件庫Input組件的坑解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

前言

Input組件大家都用過，是吧，但是你有沒有想過這樣一個場景，如下圖，我正在搜索數(shù)據(jù)

你組件上注冊了onChange事件，然后邊輸入，底下會顯示你搜索相關(guān)的內(nèi)容，

但是有一個問題就是，輸入中文的時候，你比如打三國的三字，要先輸入san然后才出現(xiàn)三

可問題來了，onChange事件監(jiān)聽的是san，已經(jīng)開始搜索了，其實我們根本不想這樣，我們想的是中文的話，等中文顯示在輸入框，也就是輸入完“三”這個字的時候，才搜索。這個咋辦

這就需要我們今天的主角Compositionstart和Compositionend事件出場了。

Compositionstart和Compositionend事件是啥

compositionstart 事件在用戶開始進行非直接輸入的時候觸發(fā)，而在非直接輸入結(jié)束，也即用戶點選候選詞或者點擊「選定」按鈕之后，比如按回車鍵，會觸發(fā) compositionend 事件。

舉個例子，還是上面輸入三這個字的過程，當你輸入s的時候，已經(jīng)打開了中文輸入法，此時compositionstart事件觸發(fā)了，當你輸入完三并且確認的時候，compositionend事件觸發(fā)。

好了，所以如果你用的組件庫，Input組件沒有優(yōu)化這一項的話，也就是onChange事件在中文輸入法下，應該返回的是中文輸入完成，也就是compositionend事件完成的字符，而不是輸入過程的字符，那么就需要組件封裝一下這個邏輯了，如果封裝，我們看下源碼。

本來是打算解析完整的Input組件的，后來想想其實這個組件太簡單了，就只講一下其中的難點吧。

源碼探析解決方案

首先Input組件如下

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

然后我們看下value屬性的formatDisplayValue是什么

// 用來記錄此時是否Compositionstart事件觸發(fā)了，如果觸發(fā)就置為true
// Compositionend結(jié)束就置為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事件獲取值，所以我們在中文輸入的時候，只要不觸發(fā)onChange事件是不是就好了！

關(guān)鍵??！最重要的知識點就是Compositionstart事件觸發(fā)了，代表正在輸入中文，那么onChange事件就不要觸發(fā)，所以我們接著把事件的代碼補上

 // 開始輸入中文的時候把 composingRef.current 置為true
  function handleCompositionStart(e: React.CompositionEvent<HTMLInputElement>) {
      composingRef.current = true;
      const {
        currentTarget: { value },
      } = e;
    }
    // 中文輸入完畢，把composingRef.current置為false，并把此時輸入完的值給handleChange（handleChange會觸發(fā)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;
      // 當中文輸入的時候，不觸發(fā)onChange事件，觸發(fā)setComposingValue只是為了讓輸入框同步你輸入的text
      if (composingRef.current) {
        setComposingValue(newStr);
      } else {
        // 完成中文輸入時同步一次 composingValue
        setComposingValue(newStr);
        // 中文輸入完畢，此時觸發(fā)onChange
        onChange(newStr, { e });
      }
    }

好了，本文結(jié)束，其實里面還有兩個細節(jié)，后面再寫一篇文章說，就是我們input框傳參，可以有defaultValue這個value是外部傳入的，還有props傳入的value，還有組件默認的defalut value，這3個值怎么寫一個hooks去處理，還有就是你們知道input框有種類型是顯示password嗎，這種顯示密碼的input框，輸入文字后顯示的是...如下：