Поместите ограничение длины в TextField в реагировать

Принятый ответ не будет работать в Firefox для больших чисел (больше 16 цифр). Числа просто ведут себя странным образом.

Для поля длиной 22 мы использовали это:

<TextField
  required
  validateOnBlur
  field="cbu"
  label="22 dígitos del CBU"
  validate={validate.required}
  type="text"
  inputProps={
    {maxLength: 22}
  }
  onInput={(e) => { e.target.value = e.target.value.replace(/[^0-9]/g, '') }}

/ >

В основном, родное ограничение maxLength для текстовых полей, плюс преобразование из строки в числа «на лету».

< Сильный > Улучшение

Также вы можете предпочесть сделать это многоразовым и более семантическим.

# constraints.js
const onlyNumbers = (e) => { e.target.value = e.target.value.replace(/[^0-9]/g, '') };

# form.js
<TextField
  field="cbu"
  label="22 dígitos del CBU" 
  inputProps={
    {maxLength: 22}
  }
  onInput={(e) => onlyNumbers(e) }

Компонент материала <TextField /> не имеет свойства length.

Вы можете создать свой в методе onChange().

updateTextField(event,value){
  if(value.length <= 12){
     //Update your state
  }
  else{
    //Value length is biggest than 12
  }
}

<TextField
    id="SigninTextfield"
    label="Aadhaar number"
    id="Aadhar"
    lineDirection="center"
    required={true}
    type="number"
    onChange={(e,v) => this.updateTextField(e,v)}
    style={styles.rootstyle}
    erorText="Please enter only 12 digits number"
/>

      <TextField
        id="username"
        name="username"
        label={translate('username')}
        onChange={handleChange}
        onBlur={handleBlur}
        value={values.username}
        error={Boolean(errors.username) && touched.username}
        helperText={(errors.username && touched.username && translate(errors.username))}
        required
        inputProps={{maxLength :20}}

      />

Вы можете установить свойство maxLength для ограничения текста в текстовом поле.

Вместо метода onChange вы можете передать maxLength inputProps опорам material-ui TextField.

<TextField
    required
    id="required"
    label="Required"
    defaultValue="Hello World"
    inputProps={{ maxLength: 12 }}
/>

По сути, мы можем редактировать все собственные атрибуты входного элемента через объект inputProps.

Ссылка на TextField Api