react中antd文本框限制輸入中文方式
方式一：
使用 replace 方法和正則表達(dá)式 /[^\u4e00-\u9fa5]/g 來過濾掉了輸入字符串中的非中文字符。然后再對(duì)過濾后的字符進(jìn)行正則驗(yàn)證，如果符合要求則更新狀態(tài)值
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 屬性的值與實(shí)際輸入值進(jìn)行分離處理
增加了一個(gè)名為 displayValue 的新狀態(tài)，用于控制輸入框的顯示值。在handleInputChange方法中，將輸入框的實(shí)際值 inputValue 賦值給 value 狀態(tài)，并將其也賦值給 displayValue 狀態(tài)。如果輸入的值不符合要求，將使用 e.target.value 替代它，以便讓用戶看到未被過濾的實(shí)際輸入值。
另外，還實(shí)現(xiàn)了一個(gè)名為 handleInputBlur 的新方法。該方法在輸入框失去焦點(diǎn)時(shí)被觸發(fā)，將 displayValue 的值更新為正確的 value 狀態(tài)值。
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;不足：以上兩個(gè)方法都有個(gè)弊端，第二次輸入中文后會(huì)把之前的刪除掉
以上就是react中antd文本框限制輸入中文方式的詳細(xì)內(nèi)容，更多關(guān)于react antd文本框輸入限制的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
react框架next.js學(xué)習(xí)之API?路由篇詳解
這篇文章主要為大家介紹了react框架next.js學(xué)習(xí)之API?路由篇詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
本文主要介紹了React四級(jí)菜單的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
這篇文章主要介紹了如何強(qiáng)制刷新react hooks組件問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
關(guān)于antd tree和父子組件之間的傳值問題(react 總結(jié))
這篇文章主要介紹了關(guān)于antd tree 和父子組件之間的傳值問題，是小編給大家總結(jié)的一些react知識(shí)點(diǎn)，本文通過一個(gè)項(xiàng)目需求實(shí)例代碼詳解給大家介紹的非常詳細(xì)，需要的朋友可以參考下2021-06-06
本文主要介紹了React實(shí)現(xiàn)音頻文件上傳與試聽,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-09-09
高性能React開發(fā)React Server Components詳解
ReactServerComponents通過服務(wù)器端渲染、自動(dòng)代碼分割等技術(shù),實(shí)現(xiàn)了高性能的React開發(fā),它解決了客戶端數(shù)據(jù)請(qǐng)求鏈?zhǔn)窖舆t、敏感數(shù)據(jù)暴露風(fēng)險(xiǎn)等問題,提供了更好的用戶體驗(yàn)和安全性,本文介紹高性能React開發(fā)React Server Components詳解,感興趣的朋友一起看看吧2025-03-03
React類組件和函數(shù)組件的所有核心區(qū)別及說明
這篇文章主要介紹了React類組件和函數(shù)組件的所有核心區(qū)別及說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2026-03-03
React中Portals與錯(cuò)誤邊界處理實(shí)現(xiàn)
本文主要介紹了React中Portals與錯(cuò)誤邊界處理實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-07-07
關(guān)于useEffect的第二個(gè)參數(shù)解讀
這篇文章主要介紹了關(guān)于useEffect的第二個(gè)參數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了React jsx文件介紹與使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03