我有一个输入字段,它应该只取最小值和最大值之间的值。
我的操作如下所示,但如图所示手动输入数字会绕过控件。
我该怎么办?
链接:codesandbox
<TextField
id="outlined-number"
label="Number max number 10"
type="number"
InputProps={{ inputProps: { min: "0", max: "10", step: "1" } }}
variant="outlined"
handleChange('number')
/>
我的 handleChange:
const handleChange = field => ({ target: { value } }) => {
setState(prev => {
const _item = prev.item;
_item[field] = value;
return { ...prev, item: _item };
});
};
handleChange('nameAttr')
最佳答案
您可以将 TextField 用作受控组件以防止输入超过 10 个。您还应该为此使用一个额外的状态变量。
代码如下(将组件替换为下面给出的组件,并额外导入useEffect)
export default function FormPropsTextFields() {
const classes = useStyles();
const [value, setValue] = useState();
function handler(e) {
if (Number(e.target.value) > 10) {
setValue(10);
}else{
setValue(e.target.value);
}
}
return (
<form className={classes.root} noValidate autoComplete="off">
<div>
<TextField
id="outlined-number"
label="Number max number 10"
type="number"
InputProps={{ inputProps: { min: "0", max: "10", step: "1" } }}
variant="outlined"
onChange={handler}
value={value}
/>
</div>
</form>
);
}
因此,如果输入值大于 10,由于我们在 handler
函数中的逻辑,它会阻止更新状态变量 value
。这不是最佳解决方案,您可能希望基于此示例构建您的逻辑。
关于javascript - Reactjs material ui textfield number max 和 min,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64933296/