react中antd文本框限制输入中文方式

import React, { useState, useEffect } from 'react';
import { Input } from 'antd';
const ChineseInput = () => {
  const [value, setValue] = useState('');
  const handleInputChange = e => {
    const reg = /[\u4e00-\u9fa5]/g; // 只允许中文字符
    const inputValue = e.target.value.replace(/[^\u4e00-\u9fa5]/g, ''); // 过滤掉输入的非中文字符
    if (reg.test(inputValue)) {
      setValue(inputValue);
    }
    else{
      setValue('');
    }
  };
  return <Input value={value} onChange={handleInputChange} />;
};
export default ChineseInput;

import React, { useState } from 'react';
import { Input } from 'antd';
const ChineseInput = () => {
  const [value, setValue] = useState('');
  const [displayValue, setDisplayValue] = useState('');
  const handleInputChange = e => {
    const reg = /[\u4e00-\u9fa5]/g;
    const inputValue = e.target.value.replace(/[^\u4e00-\u9fa5]/g, '');
    if (reg.test(inputValue)) {
      setValue(inputValue);
      setDisplayValue(inputValue);
    } else {
      setDisplayValue(e.target.value);
    }
  };
  const handleInputBlur = () => {
    setDisplayValue(value);
  };
  return <Input value={displayValue} onChange={handleInputChange} onBlur={handleInputBlur} />;
};
export default ChineseInput;