Question

我们只需要用户输入数字，最大长度应为3。我们如何在材料ui中完成此操作？

<TextField
  id="score"
  label="score"
  className={classes.textField}
  name="totalScore"
  margin="normal"
  defaultValue={score}
/>

我们这里只需要数字值

Answer 1

数量+长度限制

<TextField
   value={phone}
   onChange={event => setPhone(event.target.value)}
   variant="outlined"
   placeholder={'Phone number'}
   type={'number'}
   onInput={(e)=>{e.target.value = Math.max(0, parseInt(e.target.value)).toString().slice(0,10)}}
   min={0} 
/>

Answer 2

<TextField
  id="score"
  label="score"
  className={classes.textField}
  name="totalScore"
  margin="normal"
  defaultValue={score}
/>

您可以使用Jquery进行

$('#score').keypress(function(e){
    var code = (e.which) ? e.which : e.keyCode;
    if($('#' + e.target.id).val().length > 2)
        e.preventDefault();
    if (code > 31 && (code < 48 || code > 57)) {
        e.preventDefault();
    }
});

Answer 3

实际上这是它的工作方式，您输入的类型为number。因此，您可以应用max属性，但是它将验证不限制输入数字，请检查此thread。

解决方法是对输入应用并计算长度。像这样

 onInput={(e)=>{ 
        e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,3)

所以您的文本输入看起来像

<TextField type="number"
    className="text-field-amount"
    onInput={(e)=>{ 
        e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,2)
    }}
    min={0}
/>

Demo

Answer 4

使用受控输入，并且仅在输入为数字时更新状态。

例如：状态将是这样

this.state={
    score: 0
}

创建一个函数来处理文本字段中的更改。

handleChange(e){
    //update state here with value from TextField.
}

，您的文本字段将如下所示。

<TextField
  id="score"
  label="score"
  className={classes.textField}
  name="totalScore"
  margin="normal"
  value={this.state.score}
  onChange={this.handleChange.bind(this)}
/>

Answer 5

尝试一下...

<TextField
  id="score"
  label="score"
  name="totalScore"
  style={style.filedStyle}
  inputProps={{ min: 3, max: 3}}
/>

Answer 6

             <TextField
              id="number"
              placeholder="Enter Number"
              type="number"
              value={state.count}
              onChange={(event) => {
                const regex = /^([0-9]){minLength,maxLength}$/;
                if (event.target.value === '' || regex.test(event.target.value)) {
                  setState({ ...state, count: event.target.value });
                }
              }}
              variant="outlined" />

仅允许材料ui中的数字达到特定长度

6 个答案: