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 Native使用axios进行网络请求的方法
axios是一个基于Promise的Http网络库，可运行在浏览器端和Node.js中，Vue应用的网络请求基本都是使用它完成的。这篇文章主要介绍了React Native使用axios进行网络请求,需要的朋友可以参考下2021-08-08
本篇文章主要介绍了React-Native之定时器Timer的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要介绍了React高级指引中使用PropTypes实现类型检查功能的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-02-02
React Native:react-native-code-push报错的解决
这篇文章主要介绍了React Native:react-native-code-push报错的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
React实现数字滚动组件numbers-scroll的示例详解
数字滚动组件，也可以叫数字轮播组件，这个名字一听就是非常普通常见的组件。本文将利用React实现这一组件，感兴趣的小伙伴可以了解一下2023-03-03
这篇文章主要为大家详细介绍了React处理复杂图片样式的方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-04-04
这篇文章主要给大家介绍了关于React Component存在的几种形式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-11-11
React是一个流行的JavaScript库,用于构建现代前端应用程序,本文将深入探讨如何在React中生成和导出Word文档,感兴趣的小伙伴可以学习一下2023-09-09
这篇文章主要介绍了在React中this容易遇到的问题总结，文中有详细的示例代码，希望对大家有一定的帮助,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了react实现浏览器自动刷新的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
最新评论