乐趣区

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

jiezi

在前端开发中，通过监听 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}
      />
    )
  }

当然这里能够改成一个高阶函数，这样的话就不必独自给 textArea 也写一个组件了，不过常见的输出标签也就这俩，没有必要复用。

这两个事件的兼容性还不错：


还在用这些老浏览器的电脑根本能够疏忽，硬要兼容的话，怕是只有用适当魔改的防抖或者节流函数来代替了。

退出移动版