- 1 antd中，input组件在触发onChange时，如果是中文输入模式，会频繁被触发，导致页面性能降低。尤其是在onChange时需要实时搜索的情况。
- 2 在mac设备下，如果在onChange中使用value.replace(/\s/g,''/), 会出现无法输入中文的问题。优化之后，可以正常输入。
文章图片
优化之后的ChineseInput
文章图片
使用方式： 和原始Input组件使用方式一样，没用额外api
index.tsx
import 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 = (
{
valuehttps://www.it610.com/article/= '',
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 (
{
if (e.target.value =https://www.it610.com/article/=='') {
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;
}
}
}使用方式：
【在react中基于ant-design，封装一个中文输入框|在react中基于ant-design，封装一个中文输入框,提高onchange性能】组件源码： github.com/jsoncode/empty-react-antd-ts/tree/main/src/components/ChineseInput
