React Hooks 实现的中文输入组件
正文
在前端开发中，通过监听 onInput 事件来触发输入框内容的更新，是没有问题的，但如果输入的内容有中文的时候，会出现类似 zhong'wen'nei'rong这样的备选内容。
这种内容的影响普遍不会很大，但是当需要对输入的内容进行一些耗时的操作的时候，这个影响就不得不考虑一下了，比如说内容需要进行复杂的渲染、通过网络实时发送等等场景。
先等待而不触发onInput事件
对这种问题的解决方案，需要借助浏览器提供的组合输入事件 。简单地说，输入中日韩文等各种包含“选字”环节的文字的时候，会额外触发两个事件compositionStart和compositionEnd，监听并处理这两个事件，就可以在用户还未完成选字的时候先等待而不触发onInput事件：
如果仅仅需要处理组合输入的话，使用 compositionEnd 代替 onInput 就可以，但用户偶尔也需要输入英文和数字，这些输入不会触发 compositionEnd。
因此我们需要在 compositionStart 的时候进入等待状态，等待状态中间的所有 onInput 一律不处理。而输入英文和字母的时候，onInput 则正常处理。
标记等待状态的方法
标记等待状态的方法比较多，例如useRef。
import { useRef, useState } from "react";
export function ChineseInput(params){
const { onInput = () => {} } = params;
const lockRef = useRef(false);
// preview 用于预览，不然都不知道自己打的什么内容
const [preview, setPreview] = useState(value);
// 进入组合输入状态
const handleStart = () => {
lockRef.current = true
};
const handleInput = event => {
// 不管状态如何，总是需要预览的
setPreview(event.target.value);
// 处于组合输入状态，不予处理
if(lockRef.current) return;
// 非组合输入状态，触发 onInput
onInput(event);
};
// 选字结束，触发 onInput
const handleEnd = event => {
setPreview(event.target.value);
lockRef.current = false;
onInput(event);
};
return (
<input
{...params}
onCompositionEnd={handleEnd}
onCompositionStart={handleStart}
onInput={handleInput}
/>
)
} 当然这里可以改成一个高阶函数或者自定义钩子，这样的话就不用单独给 textArea 也写一个组件了，不过常见的输入标签也就这俩，没有必要复用。
这两个事件的兼容性还不错：
还在用比这更老的浏览器的电脑基本可以忽略掉，硬要兼容的话，怕是只有用适当魔改的防抖或者节流函数来代替了。
以上就是React Hooks 实现的中文输入组件的详细内容，更多关于React Hooks中文输入组件的资料请关注脚本之家其它相关文章！
相关文章
在react-antd中弹出层form内容传递给父组件的操作
这篇文章主要介绍了在react-antd中弹出层form内容传递给父组件的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
随着业务的发展，每一个 React Native 应用的代码数量都在不断增加。作为一个前端想到的方案自然就是动态导入（Dynamic import）了，本文介绍了React Native中实现动态导入的示例代码，需要的可以参考一下2022-06-06
这篇文章主要介绍了React中的路由嵌套和手动实现路由跳转的方式,手动路由的跳转，主要是通过Link或者NavLink进行跳转的，实际上我们也可以通JavaScript代码进行跳转，需要的朋友可以参考下2022-11-11
这篇文章主要为大家详细介绍了Mixin、HOC、Render Props、Hooks这四种组件间复用的方式，文中的示例代码讲解详细，感兴趣的小伙伴可以了解一下2023-06-06
本文以简洁为目标，帮助快速上手react-router-dom默认你接触过路由相关的开发，通过实例代码讲解的很详细，对React路由相关知识感兴趣的朋友一起看看吧2021-05-05
这篇文章主要介绍了使用React简短代码动态生成栅格布局的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-05-05
这篇文章主要介绍了详解react关于事件绑定this的四种方式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
react函数组件useState异步,数据不能及时获取到的问题
这篇文章主要介绍了react函数组件useState异步,数据不能及时获取到的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要为大家介绍了React源码调试方式实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
React 浮层组件（也称为弹出组件或弹窗组件）通常是指在用户界面上浮动显示的组件,本文主要介绍了浮层组件的实现方法,感兴趣的小伙伴可以了解下2024-02-02
最新评论