1 antd中,input组件在触发onChange时,如果是中文输入模式,会频繁被触发,导致页面性能降低。尤其是在onChange时需要实时搜索的情况。
2 在mac设备下,如果在onChange中使用value.replace(/\s/g,''/), 会出现无法输入中文的问题。优化之后,可以正常输入。
默认情况下的Input组件:
优化之后的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<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/ChineseInput
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。