快捷導(dǎo)航

React?Hooks?實(shí)現(xiàn)的中文輸入組件

更新時間：2023年05月16日 11:37:15 作者：知名噴子

這篇文章主要為大家介紹了React?Hooks實(shí)現(xiàn)的中文輸入組件示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

在前端開發(fā)中，通過監(jiān)聽 onInput 事件來觸發(fā)輸入框內(nèi)容的更新，是沒有問題的，但如果輸入的內(nèi)容有中文的時候，會出現(xiàn)類似 zhong'wen'nei'rong這樣的備選內(nèi)容。

這種內(nèi)容的影響普遍不會很大，但是當(dāng)需要對輸入的內(nèi)容進(jìn)行一些耗時的操作的時候，這個影響就不得不考慮一下了，比如說內(nèi)容需要進(jìn)行復(fù)雜的渲染、通過網(wǎng)絡(luò)實(shí)時發(fā)送等等場景。

先等待而不觸發(fā)onInput事件

對這種問題的解決方案，需要借助瀏覽器提供的組合輸入事件 。簡單地說，輸入中日韓文等各種包含“選字”環(huán)節(jié)的文字的時候，會額外觸發(fā)兩個事件compositionStart和compositionEnd，監(jiān)聽并處理這兩個事件，就可以在用戶還未完成選字的時候先等待而不觸發(fā)onInput事件：

源自MDN 文檔： compositionstart

如果僅僅需要處理組合輸入的話，使用 compositionEnd 代替 onInput 就可以，但用戶偶爾也需要輸入英文和數(shù)字，這些輸入不會觸發(fā) compositionEnd。

因此我們需要在 compositionStart 的時候進(jìn)入等待狀態(tài)，等待狀態(tài)中間的所有 onInput 一律不處理。而輸入英文和字母的時候，onInput 則正常處理。

標(biāo)記等待狀態(tài)的方法

標(biāo)記等待狀態(tài)的方法比較多，例如useRef。

import { useRef, useState } from "react";
export function ChineseInput(params){
    const { onInput = () => {} } = params;
    const lockRef = useRef(false);
    // preview 用于預(yù)覽，不然都不知道自己打的什么內(nèi)容
    const [preview, setPreview] = useState(value);
    // 進(jìn)入組合輸入狀態(tài)
    const handleStart = () => {
      lockRef.current = true
    };
    const handleInput = event => {
      // 不管狀態(tài)如何，總是需要預(yù)覽的
      setPreview(event.target.value);
      // 處于組合輸入狀態(tài)，不予處理
      if(lockRef.current) return;
      // 非組合輸入狀態(tài)，觸發(fā) onInput
      onInput(event);
    };
    // 選字結(jié)束，觸發(fā) onInput
    const handleEnd = event => {
      setPreview(event.target.value);
      lockRef.current = false;
      onInput(event);
    };
    return (
      <input
        {...params}
        onCompositionEnd={handleEnd}
        onCompositionStart={handleStart}
        onInput={handleInput}
      />
    )
  }

當(dāng)然這里可以改成一個高階函數(shù)或者自定義鉤子，這樣的話就不用單獨(dú)給 textArea 也寫一個組件了，不過常見的輸入標(biāo)簽也就這倆，沒有必要復(fù)用。

這兩個事件的兼容性還不錯：