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

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

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

我该怎么办

链接：

---

将函数设置为更改文本输入的

onChange

设置数字的状态

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

将文本输入的值设置为

数字

，然后添加

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

const validateEnumber=（事件）=>{
常量值=event.target.value；
常量设置值=值

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

您可以将TextField用作受控组件，以防止输入超过10。您还应该为此使用一个额外的状态变量

代码如下（用下面给出的组件替换组件，并另外导入useEffect）

导出默认函数FormPropsTextFields（）{
const classes=useStyles（）；
const[value，setValue]=useState（）；
函数处理程序（e）{
如果（数量（如目标值）>10）{
设定值（10）；
}否则{
设定值（即目标值）；
}
}
返回(
);
}

因此，如果输入值大于10，它会阻止更新状态变量
值
，这要归功于
处理程序
函数中的逻辑。这不是最佳解决方案，您可能希望基于此示例构建您的逻辑。
可能有点晚，但它对我有效

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

然后在yout TextField中您可以

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

handle（e））
value={value}
/>
是的，这就是它的工作原理，尝试在模糊上更改值，在什么意义上，你能举个例子吗？我添加了一个答案，希望它能帮助你我必须保留我的通用handleChange（见上文），我不能创建自定义的。@Paul请更新你的代码沙盒演示，它没有
handleChange
我必须保留我的通用handleChange（见上文），我无法创建自定义的。正如另一位用户指出的，onBlur似乎是您的最佳选择。我认为我找到的另一个解决方案是对应该更改状态的变量使用useEffect并检查它们。也许目前这是我正在考虑的最佳解决方案，我有一个想法，但我不知道这两个方案中的哪一个是最佳解决方案使用。@Paul为您的onChange添加了示例
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>
  );
}

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}
    />