ReactJS Material-UI：仅接受 TextField 中的无符号正整数值

Question

我有以下输入字段，我希望它只接受正整数，而不提供插入字符的可能性- + , .。

<TextField
  fullWidth
  type="number"
  placeholder={'[1-100]'}
  id="simple-start-adornmhent"
  onChange={this.handleChangeField('amount')}
  InputProps={{ inputProps: { min: 1 } }}
/>

你能给我一些建议吗？

Answer 1

尝试这个

  <TextField  type="number" 
     label="Short stop treshold"
     InputProps={{
        inputProps: { min: 0 }
      }}
     value={10}
     onChange={handleShortStopChange} />

Answer 2

在 onChange 方法中，您可以创建自己的规则来处理数据。

在下面的例子中，如果输入值小于零，那么我将该值设置为零。

这解决了我的问题。您可以根据需要改进规则。

<TextField
    type={"number"}
    onChange={(event) =>
        event.target.value < 0
            ? (event.target.value = 0)
            : event.target.value
    }
/>

Answer 3

这应该有效，

inputProps={{min:0}}

Answer 4

通过使用正则表达式，您可以删除非数字字符。检查这个片段：

onChanged (text) {
    this.setState({
        YourAmountVariable: text.replace(/[^0-9]/g, ''),
    });
}

这将从您的输入中删除任何非数字字符。