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

方式一：

使用 replace 方法和正则表达式 /[^\u4e00-\u9fa5]/g 来过滤掉了输入字符串中的非中文字符。然后再对过滤后的字符进行正则验证，如果符合要求则更新状态值

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;

方式二：

将 value 属性的值与实际输入值进行分离处理
增加了一个名为 displayValue 的新状态，用于控制输入框的显示值。在handleInputChange方法中，将输入框的实际值 inputValue 赋值给 value 状态，并将其也赋值给 displayValue 状态。如果输入的值不符合要求，将使用 e.target.value 替代它，以便让用户看到未被过滤的实际输入值。
另外，还实现了一个名为 handleInputBlur 的新方法。该方法在输入框失去焦点时被触发，将 displayValue 的值更新为正确的 value 状态值。

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;

不足：以上两个方法都有个弊端，第二次输入中文后会把之前的删除掉