关于javascript:React-Hooks-实现的中文输入组件

30次阅读

共计 1099 个字符，预计需要花费 3 分钟才能阅读完成。

在前端开发中，通过监听 onInput 事件来触发输入框内容的更新，是没有问题的，但如果输出的内容有中文的时候，会呈现相似 zhong'wen'nei'rong这样的备选内容。
这种内容的影响广泛不会很大，然而当须要对输出的内容进行一些耗时的操作的时候，这个影响就不得不考虑一下了，比如说内容须要进行简单的渲染、通过网络实时发送等等场景。

对这种问题的解决方案，须要借助浏览器提供的 组合输出事件 。简略地说，输出中日韩文等各种蕴含“选字”环节的文字的时候，会额定触发两个事件compositionStart 和compositionEnd，监听并解决这两个事件，就能够在用户还未实现选字的时候先期待而不触发 onInput 事件：

源自 MDN 文档：compositionstart

如果仅仅须要解决组合输出的话，应用 compositionEnd 代替 onInput 就能够，但用户偶然也须要输出英文和数字，这些输出不会触发 compositionEnd。

因而咱们须要在 compositionStart 的时候进入期待状态，期待状态两头的所有 onInput 一律不解决。而输出英文和字母的时候，onInput 则失常解决。

标记期待状态的办法比拟多，例如useRef。

import {useRef} from "react";

export function ChineseInput(params){const { onInput = () => {}} = params;
    const lockRef = useRef(false);
  
    // 进入组合输出状态
    const handleStart = () => {lockRef.current = true};
  
    const handleInput = event => {
      // 处于组合输出状态，不予解决
      if(lockRef.current) return;

      // 非组合输出状态，触发 onInput
      onInput(event);
    };
  
    // 选字完结，触发 onInput
    const handleEnd = event => {
      lockRef.current = false;
      onInput(event);
    };
  
    return (
      <input
        {...params}
        onCompositionEnd={handleEnd}
        onCompositionStart={handleStart}
        onInput={handleInput}
      />
    )
  }