[英]How can I limit the user input in quantity?
I can limit the quantity of input if the user use the built in arrow icon inside the textfield
.如果用户使用textfield
内的内置箭头图标,我可以限制输入的数量。 But when the user type it, it's not working但是当用户键入它时,它不起作用
<TextField variant="outlined" label="Quantity"
onChange={(e) => setItemName({...itemName, quantity: e.target.value})}
type="number"
fullWidth name="quantity" InputProps={{ inputProps: { min: 0, max: 10, maxLength: 2}}}
pattern="^-?[0-9]\d*\.?\d*$"
/>
You can do:你可以做:
onInput={(e) => {e.target.value > 10 ? e.target.value = 10 : e.target.value}}
You can cater that in your onChange
handler.您可以在您的onChange
处理程序中满足它。 Check if the input
value is greater than max
, assign the max
to your input
value检查input
值是否大于max
,将max
分配给您的input
值
<TextField
variant="outlined"
label="Quantity"
onChange={(e) => {
const { target: { value, max } } = e;
let inputValue = value;
if (inputValue > max) inputValue = max;
setItemName({ ...itemName, quantity: inputValue })
}
type="number"
fullWidth
name="quantity"
InputProps={{ inputProps: { min: 0, max: 10, maxLength: 2}}}
pattern="^-?[0-9]\d*\.?\d*$"
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.