Я беру от пользователя номер карты и хочу, чтобы длина, введенная пользователем, была не меньше и не больше 12. Вот объявление моего текстового поля.

<TextField
    id="SigninTextfield"
    label="Aadhaar number"
    id="Aadhar"
    lineDirection="center"
    required={true}
    type="number"
    maxLength={12}
    style={styles.rootstyle}
    erorText="Please enter only 12 digits number"
/>

Теперь я не понимаю, использовать ли JavaScript или любой обработчик событий для ограничения длины.

14
Mayank Bansal 29 Авг 2017 в 16:02

5 ответов

Лучший ответ

Я нашел другое решение здесь.

<TextField
    required
    id="required"
    label="Required"
    defaultValue="Hello World"
    onInput = {(e) =>{
        e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,12)
    }}/>
12
Gaurav Bharti 27 Дек 2018 в 11:31

Принятый ответ не будет работать в 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) }
1
mayid 21 Ноя 2018 в 17:59

Компонент материала <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"
/>
1
Alexis 29 Авг 2017 в 13:14
      <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}}

      />
1
fahimeh ahmadi 12 Мар 2020 в 13:53

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

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

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

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

Ссылка на TextField Api

43
kushalvm 1 Июл 2019 в 07:17