Reactjs 材料 ui 文本字段编号最大值和最小值

Question

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

我按如下所示操作，但如图所示手动输入数字绕过了控件。

我能怎么做？

链接： 代码沙盒

<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

也许有点晚，但它对我有用

const minValue = 0  //Or whichever number you want
const maxValue = 10
const [value, setValue] = useState(minValue)

//Executes when the value changes
const handle = (e) => {
    const newValue = Math.min(Math.max(e.target.value, minValue), maxValue)
    setValue(previousValue => newValue)
}

然后在你的 TextField 你做...

    <TextField
      id="outlined-number"
      label="Number max number 10"
      type="number"
      variant="outlined"
      handleChange(e => handle(e))
      value={value}
    />

Answer 2

将函数设置为文本输入的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);
};

更新示例

Answer 3

https://codesandbox.io/s/material-demo-forked-hxflw?file=/demo.js

使用 onBlur 或 onChange 将您的值调整到最大值。

使用您的 onChange：

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

Answer 4

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