Javascript ReactJS材质UI:在TextField中仅接受正的无符号整数值

我有以下输入字段，我希望它只接受正整数，而不允许插入字符

-+，。

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

---

你能给我一些建议吗？

通过使用正则表达式，你可以删除非numaric字符。 检查此代码段：

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

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

还可以尝试在TextField中使用“validator”道具来限制用户只输入正数

<TextField
     validator: {(input) => {/*write your function here to check number input greater than 0*/}}
/>

{/*在此处编写函数以检查大于0的数字输入*/}
/>

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

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

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

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

event.target.value<0
? （event.target.value=0）
：event.target.value
}
/>

我使用HTML模式的方式

• 只允许数字
• 显示手机上的数字键盘
• 防止粘贴 非数字
• 如果小于1，则显示错误消息

将模式道具添加到inputProps以仅允许0到9

pattern: "[0-9]*"

使用e.target.validity.valid检查模式是否有效（仅允许0-9）

添加type=“tel”（这将在手机上显示数字键盘）

如何将类型设置为“文本”并手动控制输入？ 试试这个：

<TextField
  value={this.state.value}
  onChange={(e) => {
    let input = e.target.value ;
    if( !input || ( input[input.length-1].match('[0-9]') && input[0].match('[1-9]')) )
      this.setState({value:input})
  }}
  type="text"
  placeholder={'[1-100]'}
/>

{
让输入=e.target.value；
如果（！input | |（input[input.length-1].match（'[0-9]'）和&input[0].match（'[1-9]'））
this.setState（{value:input}）
}}
type=“text”
占位符={'[1-100]'}
/>

---

使用此代码，我们只允许第一个字符为[1-9]，下面的字符为[0-9]。我们还允许TextField为空

您可以在状态变量中设置值时使用parseInt

<TextField
  fullWidth
  type="number"
  placeholder={'[1-100]'}
  id="simple-start-adornmhent"
  onChange={e=>setField(parseInt(e.target.value))}
  InputProps={{ inputProps: { min: 1, max:100 } }}
/>

setField（parseInt（e.target.value））}
InputProps={{InputProps:{min:1，max:100}}
/>

如果使用type=“number”而不是TextField的输入，它应该可以工作。您需要TextField吗？我建议您查看文档的详细信息。你可能也会发现我的答案很有帮助。它不太有效，它给了我几个问题：

<TextField
  value={this.state.value}
  onChange={(e) => {
    let input = e.target.value ;
    if( !input || ( input[input.length-1].match('[0-9]') && input[0].match('[1-9]')) )
      this.setState({value:input})
  }}
  type="text"
  placeholder={'[1-100]'}
/>

<TextField
  fullWidth
  type="number"
  placeholder={'[1-100]'}
  id="simple-start-adornmhent"
  onChange={e=>setField(parseInt(e.target.value))}
  InputProps={{ inputProps: { min: 1, max:100 } }}
/>