Reactjs材料ui文本字段数字最大和最小

Question

我有一个输入字段，它只能取最小值和最大值之间的值。

我做了如下所示的操作，但是如图所示手动输入数字会绕过控制。

我能怎么做？

链接：codesandbox

<TextField
          id="outlined-number"
          label="Number max number 10"
          type="number"
          InputProps={{ inputProps: { min: "0", max: "10", step: "1" } }}
          variant="outlined"
          handleChange('number')
        />

我的句柄更改：

const handleChange = field => ({ target: { value } }) => {
        setState(prev => {
            const _item = prev.item;
            _item[field] = value;
            return { ...prev, item: _item };
        });
    };

handleChange('nameAttr')

Answer 1

onChange设置文本输入的函数

设置号码的状态

const [number, setNumber] = useState('');

将文本输入的值设置为number然后添加onChange事件

<TextField
    ....
    onChange={validateNumber}
    value={number}
/>

const validateNumber = (event) => {
  const value = event.target.value;
  const setValue = value <= 10 ? value : number; //if the input value is greater than 10, then don't change the input value
  setNumber(setValue);
};

更新的示例