最近做pc端時發(fā)現(xiàn)，在input輸入中文時，拼音階段就觸發(fā)了change事件，造成了很多異常請求，如何修復(fù)此類問題呢？先了解一下以下事件：

輸入中文時會觸發(fā)的三個事件

compositionstart

當(dāng)用戶使用拼音輸入法開始輸入漢字時，這個事件就會被觸發(fā)。

compositionupdate

input 事件在輸入過程中、內(nèi)容變化后就觸發(fā)

compositionend

輸入完成時會觸發(fā)

change事件

鍵盤任意按鍵都會觸發(fā)，無論中文還是英文，中文的輸入拼音的過程中也會觸發(fā)

需要解決的問題場景

輸入中文時：輸入完成時觸發(fā)接口請求；輸入英文、數(shù)字時：即時觸發(fā)接口請求；

解決：

設(shè)置中間變量isOnComposition為false，當(dāng)觸發(fā)compositionstart時置為true，當(dāng)觸發(fā)compositionend時置為false，并觸發(fā)接口請求；在change事件中監(jiān)聽，當(dāng)isOnComposition為true時，不觸發(fā)接口請求，為false時觸發(fā)接口請求。

  const handleComposition = (e) => {
    if (e.type === 'compositionend') {
      isOnComposition = false;
      handleChange();
    } else {
      isOnComposition = true;
    }
  }

  const handleChange = (e) => {
    if(!isOnComposition) {
      // 在此處觸發(fā)接口請求
    }
  }

// 標(biāo)簽處 -- 以下為react 寫法
 <Input  placeholder="請輸入" onChange={handleChange} onCompositionEnd = {handleComposition} 
 donCompositionStart = {handleComposition} />