Question

我有以下输入字段，我希望它只接受正整数，而不能插入以下字符“-+，。”。

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

能给我一些建议吗？

Answer 1

还可以尝试在TextField中使用“验证器”道具来限制用户仅输入正数。

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

Answer 2

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

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

这将从您的输入中删除所有非数字字符。

Answer 3

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

在下面的这种情况下，如果输入值小于零，则将其设置为零。

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

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

Answer 4

我使用HTML模式的方式。

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

this help article

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

pattern: "[0-9]*"

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

 const [ value, setValue ] = useState(1)
    const onChange = (e) => {
          console.log('e.validity', e.target.validity.valid);
          if (e.target.validity.valid || e.target.value === '') setValue(e.target.value)
    }

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

 <TextField
        variant="standard"
        name="price"
        value={value}
        fullWidth
        onChange={onChange}
        type="tel"
        error={value < 1}
        helperText={ value < 1 ? 'Min. 1' : '' }
        inputProps={{
            pattern: "[0-9]*",
        }}
    />

Answer 5

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

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

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

Answer 6

您可以在设置状态变量中的值时使用 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 } }}
/>

Answer 7

试试这个

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

Answer 8

使用 Hooks 的材料 ui 中的文本字段对于手机号码只有 maxlength 10 没有文本和特殊情况

     const [values1, setValues1] = useState("");
     const handleChange = (e) => {
        
        const re = /^[0-9\b]+$/;
       if (e.target.value === '' || re.test(e.target.value)) {
          setValues1(e.target.value)
       }
    
      };       
    
    return(
     <TextField 
            label="Enter Mobile Number" name="mobile" 
            inputProps={{ maxLength: 10}} value={values1} type="text" 
            onChange={handleChange} className={classes.textfield} />
)

ReactJS材质ui TextField类型编号仅正无符号整数值

8 个答案: