我有 3 個輸入供用戶輸入一些最終成為日期格式的值
對于我的輸入“天”和“月”，我希望用戶輸入 2 個整數，而不再輸入“年”，我希望用戶輸入 4 個整數。
做這個的最好方式是什么？
<input
name="month"
value={values.dateOfBirth.month}
onChange={(e) => handleDateChange(e)}
type="number"
placeholder={"MM"}
className={dateErr ? "error" : ""}
/>
<br />
<input
name="day"
value={values.dateOfBirth.day}
onChange={(e) => handleDateChange(e)}
type="number"
placeholder={"DD"}
className={dateErr ? "error" : ""}
/>
<br />
<input
name="year"
value={values.dateOfBirth.year}
onChange={(e) => handleDateChange(e)}
type="number"
placeholder={"YYYY"}
className={dateErr ? "error" : ""}
/>
uj5u.com熱心網友回復：
<input
name="month"
value={values.dateOfBirth.month}
onChange={(e) => {
if(e.target.value.length <3){
handleDateChange(e)
}else {
e.target.value= e.target.value.slice(0,2)
}
}}
type="number"
placeholder={"MM"}
className={dateErr ? "error" : ""}
/>
它對我很有效。
uj5u.com熱心網友回復：
嘗試這個
您可以使用簡單的regex只允許一位或兩位數字。但是您也可以添加許多限制。
import { useState } from "react";
export default function App() {
const [value, setValue] = useState("");
const handleDateChange = (e) => {
const currentValue = e.target.value;
if (currentValue === "") {
setValue(currentValue);
} else if (/^\d{1,2}$/.test(currentValue)) {
setValue(currentValue);
}
};
return (
<div className="App">
<input type="text" value={value} onChange={handleDateChange} />
</div>
);
}
代碼沙箱 => https://codesandbox.io/s/mystifying-browser-0ry45?file=/src/App.js
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/363684.html
下一篇：在反應中設定自定義錯誤驗證