React Hooks 实现的中文输入组件

阿飞生活探索

正文

在前端开发中，通过监听

1. onInput

复制代码

事件来触发输入框内容的更新，是没有问题的，但如果输入的内容有中文的时候，会出现类似

1. zhong'wen'nei'rong

复制代码

这样的备选内容。
这种内容的影响普遍不会很大，但是当需要对输入的内容进行一些耗时的操作的时候，这个影响就不得不考虑一下了，比如说内容需要进行复杂的渲染、通过网络实时发送等等场景。

先等待而不触发onInput事件

对这种问题的解决方案，需要借助浏览器提供的组合输入事件 。简单地说，输入中日韩文等各种包含“选字”环节的文字的时候，会额外触发两个事件

1. compositionStart

复制代码

和

1. compositionEnd

复制代码

，监听并处理这两个事件，就可以在用户还未完成选字的时候先等待而不触发

1. onInput

复制代码

事件：

源自MDN 文档： compositionstart
如果仅仅需要处理组合输入的话，使用

1. compositionEnd

复制代码

代替

1. onInput

复制代码

就可以，但用户偶尔也需要输入英文和数字，这些输入不会触发

1. compositionEnd

复制代码

。
因此我们需要在

1. compositionStart

复制代码

的时候进入等待状态，等待状态中间的所有

1. onInput

复制代码

一律不处理。而输入英文和字母的时候，

1. onInput

复制代码

则正常处理。

标记等待状态的方法

标记等待状态的方法比较多，例如

1. useRef

复制代码

。

1. import { useRef, useState } from "react";
   
2. export function ChineseInput(params){
   
3.     const { onInput = () => {} } = params;
   
4.     const lockRef = useRef(false);
   
5.     // preview 用于预览，不然都不知道自己打的什么内容
   
6.     const [preview, setPreview] = useState(value);
   
7.     // 进入组合输入状态
   
8.     const handleStart = () => {
   
9.       lockRef.current = true
   
10.     };
    
11.     const handleInput = event => {
    
12.       // 不管状态如何，总是需要预览的
    
13.       setPreview(event.target.value);
    
14.       // 处于组合输入状态，不予处理
    
15.       if(lockRef.current) return;
    
16.       // 非组合输入状态，触发 onInput
    
17.       onInput(event);
    
18.     };
    
19.     // 选字结束，触发 onInput
    
20.     const handleEnd = event => {
    
21.       setPreview(event.target.value);
    
22.       lockRef.current = false;
    
23.       onInput(event);
    
24.     };
    
25.     return (
    
26.       <input
    
27.         {...params}
    
28.         onCompositionEnd={handleEnd}
    
29.         onCompositionStart={handleStart}
    
30.         onInput={handleInput}
    
31.       />
    
32.     )
    
33.   }

复制代码

当然这里可以改成一个高阶函数或者自定义钩子，这样的话就不用单独给

1. textArea

复制代码

也写一个组件了，不过常见的输入标签也就这俩，没有必要复用。
这两个事件的兼容性还不错：

还在用比这更老的浏览器的电脑基本可以忽略掉，硬要兼容的话，怕是只有用适当魔改的防抖或者节流函数来代替了。
以上就是React Hooks 实现的中文输入组件的详细内容，更多关于React Hooks中文输入组件的资料请关注脚本之家其它相关文章！

来源:https://www.jb51.net/javascript/284533vqv.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！