考慮以下代碼：
<Grid item lg={6} md={6} xs={12} >
<TextField fullWidth type={'text'} label="Product Color" value={productColor} onChange={(e) => setProductColor(e.target.value)} />
</Grid>
即使設定為輸入文本，如何完全防止輸入數字，只允許來自 Az 或 az 的文本？有任何想法嗎？
uj5u.com熱心網友回復：
一種方法是利用您可以將某些道具傳遞給文本欄位并將其與正則運算式結合的事實。這不一定會阻止他們允許輸入，但是，如果它包含任何數字，它將阻止提交文本欄位。然后，您只需添加錯誤處理即可顯示相關訊息
<TextField
inputProps={{ pattern: "([^0-9]*)" }} error={'Error Message'}
/>
uj5u.com熱心網友回復：
像這樣使用正則運算式：
import { Stack, TextField } from "@mui/material";
import { useState } from "react";
const isLetters = (str) => /^[A-Za-z]*$/.test(str);
export default function IndexPage() {
const [val, setVal] = useState("");
const onInputChange = (e) => {
const { value } = e.target;
if (isLetters(value)) {
setVal(value);
}
};
return (
<Stack spacing={2} padding={2} height={"100vh"}>
<TextField label="Letters only" value={val} onChange={onInputChange} />
</Stack>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/408443.html
標籤：
上一篇：Web音頻API處理器結果
下一篇：SQLBOM樹連接