javascript - Reactjs material ui textfield number max 和 min

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')
        />

我的 handleChange:

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

handleChange('nameAttr')

Answer 1

您可以将 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。这不是最佳解决方案，您可能希望基于此示例构建您的逻辑。