react Input組件Compositionstart和Compositionend事件

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

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

前言

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

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

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

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

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

Compositionstart和Compositionend事件是啥

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

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

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

本來(lái)是打算解析完整的Input組件的，后來(lái)想想其實(shí)這個(gè)組件太簡(jiǎn)單了，就只講一下其中的難點(diǎn)吧。

源碼探析解決方案

首先Input組件如下

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

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

// 用來(lái)記錄此時(shí)是否Compositionstart事件觸發(fā)了，如果觸發(fā)就置為true
// Compositionend結(jié)束就置為false
 const composingRef = useRef(false);
 // 暴露給
  const [value, onChange] = useState<string>('');
 const [composingValue, setComposingValue] = useState<string>('');
 // 如果啟動(dòng)了中文輸入法，那么innerValue就是composingValue
 // composingValue就是中文輸入的時(shí)候比如“三國(guó)”，你輸入從“s”到“sanguo”，此時(shí)innerValue都是composingValue
 // 除了中文輸入法外，innerValue都是value
 const innerValue = composingRef.current ? composingValue : value ?? '';

上面可以看到innerValue是最終渲染給input框的value，用戶一般通過(guò)onChange事件獲取值，所以我們?cè)谥形妮斎氲臅r(shí)候，只要不觸發(fā)onChange事件是不是就好了！

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

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

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