[英]Material UI TextField value validation
我有一個需要驗證的 TextField:
最小值 = 1
最大值 = 10
如果我使用 TextField 中的箭頭,這些驗證會起作用,但如果我直接在其中輸入,我可以輸入任何數字。 我將如何修復/驗證這個
<TextField
label="Selectati nota"
type="number"
id={subject._id}
value={subject.gradeData.grade}
onChange={(ev) => updateGrade(ev)}
disabled={loading}
size="small"
InputLabelProps={{style: {fontSize: 18, color:"#3F51B5"}}}
InputProps={{
style: {
fontSize:18, fontWeight:"bold"
},
inputProps: {
min: 1,
max: 10,
maxLength: 2,
// pattern: "^[1-9]d*$",
},
}}
style={{ width: 150, marginLeft: 10 }}
variant="filled"/>
這行得通嗎? 添加step
<TextField type="number" inputProps={{ min: "1", max: "10", step: "1" }} />
如果這不起作用,請嘗試在 onChange function 中檢查它
嘗試更改onChange
function:
<TextField
// other props
onChange={handleChange}
/>
onChange
function:
const handleChange = e => {
setState(prev => {
if (e.target.value < min || e.target.value > max) {
return prev;
}
return e.target.value;
})
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.