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

在前端开发中，通过监听 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 也写一个组件了，不过常见的输出标签也就这俩，没有必要复用。

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

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