如何限制用户输入的数量？

Question

如果用户使用textfield内的内置箭头图标，我可以限制输入的数量。 但是当用户键入它时，它不起作用

<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*$"
                />

Answer 1

你可以做：

onInput={(e) => {e.target.value > 10 ? e.target.value = 10 : e.target.value}}

Answer 2

您可以在您的onChange处理程序中满足它。 检查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*$"
/>