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

// 用來記錄此時是否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 ?? '';

 // 開始輸入中文的時候把 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;
      // 當(dāng)中文輸入的時候，不觸發(fā)onChange事件，觸發(fā)setComposingValue只是為了讓輸入框同步你輸入的text
      if (composingRef.current) {
        setComposingValue(newStr);
      } else {
        // 完成中文輸入時同步一次 composingValue
        setComposingValue(newStr);
        // 中文輸入完畢，此時觸發(fā)onChange
        onChange(newStr, { e });
      }
    }