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

我的 handleChange：

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

handleChange('nameAttr')

- Paul

---

是的，这就是它的工作方式，尝试在失去焦点时更改该值。 - Kalhan.Toress

在什么意义下，你能给一个例子吗？ - Paul

我添加了一个答案，希望它能帮到你。 - Kalhan.Toress

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
      id="outlined-number"
      label="Number max number 10"
      type="number"
      variant="outlined"
      handleChange(e => handle(e))
      value={value}
    />

- Fercho5656

Answer 2

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

- Prashanth Wagle

---

我必须保留我的通用handleChange（见上文），我不能创建自定义的。 - Paul

正如另一位用户所指出的，onBlur 似乎是您最好的选择。 - Prashanth Wagle

我认为我找到了另一个解决方案，那就是在应该改变状态的变量上使用useEffect并进行检查。 - Paul

Answer 3

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

更新的示例

- Kalhan.Toress

---

我必须保留我的通用handleChange（见上文），我不能创建自定义的。 - Paul

@Paul，请更新您的代码沙盒演示，它没有handleChange函数。 - Kalhan.Toress

Answer 4

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 };
    });
};

- Master117

---

也许目前这是我正在考虑的最佳解决方案，我有一个想法，但我不知道其中哪一个是最好的解决方案。 - Paul

@Paul 为你的 onChange 添加了一个示例。 - Master117