在react中基於ant-design,封裝一箇中文輸入框,提高onchange效能

jsoncode發表於2022-07-05
  • 1 antd中,input元件在觸發onChange時,如果是中文輸入模式,會頻繁被觸發,導致頁面效能降低。尤其是在onChange時需要實時搜尋的情況。
  • 2 在mac裝置下,如果在onChange中使用value.replace(/\s/g,''/), 會出現無法輸入中文的問題。優化之後,可以正常輸入。

預設情況下的Input元件:
image.png

優化之後的ChineseInput
image.png

使用方式: 和原始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

相關文章