react.js - 在react中基于ant-design，封装一个中文输入框,提高onchange性能 - 前端黑科技 - SegmentFault 思否注册登录问答专栏标签活动发现✓使用“Bing”搜本站使用“Google”搜本站使用“百度”搜本站站内搜索注册登录在react中基于ant-design，封装一个中文输入框,提高onchange性能jsoncode3.9k95181关注作者首页专栏前端黑科技文章详情1在react中基于ant-design，封装一个中文输入框,提高onchange性能jsoncode3.9k95181发布于2022-07-04 English 1 antd中，input组件在触发onChange时，如果是中文输入模式，会频繁被触发，导致页面性能降低。尤其是在onChange时需要实时搜索的情况。2 在mac设备下，如果在onChange中使用value.replace(/\s/g,''/), 会出现无法输入中文的问题。优化之后，可以正常输入。默认情况下的Input组件：优化之后的ChineseInput调用方式： 和原始Input组件使用方式一样，没用额外apiindex.tsximport React, { FC, useEffect, useRef, useState } from 'react';
import { Input, InputProps } from 'antd';
import styles from './index.module.less'
interface IProps extends InputProps {
[propName: string]: any;
value?: string;
const Index: FC<IProps> = (
value = '',
onChange,
onInput,
onCompositionStart,
onCompositionEnd,
...resetProps
}) => {
const chineseInputting = useRef(false); // 是否是中文（爽字节字符的输入）模式
const [val, setVal] = useState('')
useEffect(() => {
setVal(value)
}, [value])
// 优化搜索
const change = (e: any) => {
onChange && onChange(e)
return (
<Input
className={styles.chineseInput}
{...resetProps}
value={val}
onChange={(e: any) => {
if (e.target.value === '') {
change(e)
setVal(e.target.value)
}}
onInput={(e: any) => {
onInput && onInput(e)
if (!chineseInputting.current) {
change(e)
}}
onCompositionStart={(e: any) => {
onCompositionStart && onCompositionStart(e)
chineseInputting.current = true;
}}
onCompositionEnd={(e: any) => {
onCompositionEnd && onCompositionEnd(e)
if (chineseInputting.current) {
change(e)
chineseInputting.current = false;
}}
/>
);
};
export default Index;index.module.less.chineseInput {
:global {
// 隐藏safari表单输入项右侧出现的图标
input::-webkit-contacts-auto-fill-button {
visibility: hidden;
display: none !important;
pointer-events: none;
position: absolute;
right: 0;
}使用方式：<ChineseInput
autoClear={true}
value={value}
onChange={onChange}
{...}
/>组件源码： github.com/jsoncode/empty-react-antd-ts/tree/main/src/components/ChineseInputantdreact.jsinputcomponent阅读 1.8k更新于 2022-07-22 赞1收藏1分享本作品系原创，采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议前端黑科技前端那些你不知道，又必须掌握的小技巧关注专栏jsoncodeI'm jsoncode3.9k 声望780 粉丝关注作者0 条评论得票最新提交评论评论支持部分 Markdown 语法：**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用 @ 来通知其他用户。推荐阅读nodejs递归文件夹获取所有文件路径读取文件夹 {代码...} 判断文件类型 {代码...} 路径拼接 {代码...} 封装 {代码...}jsoncode阅读 755深入理解React Diff算法fiber上的updateQueue经过React的一番计算之后，这个fiber已经有了新的状态，也就是state，对于类组件来说，state是在render函数里被使用的，既然已经得到了新的state，那么当务之急是执行一次render，得到持有新...nero赞 31阅读 12.2k评论 3用了那么久的 SVG，你还没有入门吗？其实在大部分的项目中都有 直接 或 间接 使用到 SVG 和 Canvas，但是在大多数时候我们只是选择 简单了解 或 直接跳过，这有问题吗？没有问题，毕竟砖还是要搬的！熊的猫赞 15阅读 1.3k评论 2你可能需要的多文档页面交互方案在日常工作中，面对不同的需求场景，你可能会遇到需要进行多文档页面间交互的实现，例如在 A 页面跳转到 B 页面进行某些操作后，A 页面需要针对该操作做出一定的反馈等等，这个看似简单的功能，却也需要根据不同...熊的猫赞 7阅读 945把React新文档投喂给 GPT-4 后...大家好，我卡颂。最近，React新文档终于上线了。从内容上看，新文档包括：理论知识、学习指引API介绍从形式上看，新文档除了传统的文字内容，还包括：在线Demo示意图小测验可以说是阅读体验拉满。但是，由于文档...卡颂赞 7阅读 7.2k评论 3PDF 预览和下载你是怎么实现的？在开发过程中要求对 PDF 类型的发票提供 预览 和 下载 功能，PDF 类型文件的来源又包括 H5 移动端 和 PC 端，而针对这两个不同端的处理会有些许不同，下文会有所提及。熊的猫赞 7阅读 2.9k评论 1第九期:前端九条启发分享下图是一个常见的列表, 点击列表里的详情按钮会跳到详情页, 那么也许我们在详情页修改了数据状态, 此时可能需要把修改后的状态直接传给列表页从而本地直接更新列表, 这样就不用发送新的api请求与后端交互了。lulu_up赞 8阅读 742jsoncodeI'm jsoncode3.9k 声望780 粉丝关注作者宣传栏文章目录跟随▲11产品热门问答热门专栏热门课程最新活动翻译勋章课程Java 开发课程PHP 开发课程Python 开发课程前端开发课程移动开发课程资源每周精选用户排行榜帮助中心建议反馈合作关于我们广告投放职位发布讲师招募联系我们合作伙伴关注产品技术日志社区运营日志市场运营日志团队日志社区访谈条款服务协议隐私政策下载 AppCopyright © 2011-2023 SegmentFault. 当前呈现版本 23.05.04浙ICP备15005796号-2浙公网安备33010602002000号ICP 经营许可 浙B2-20201554杭州堆栈科技有限公司版权所有