Минимум и максимум InputProps не применяются

У меня есть следующая форма:

const handleSubmit = (event) => {
      //Make a network call somewhere
      event.preventDefault();
      console.log("submitted");
  }
<form onSubmit={handleSubmit}>
              <TextField
                InputProps={{ inputProps: { min: 5, max: 11 } }}
                onChange={e => setName(e.target.value)}
                required
              />

              <Button
                type="submit"
              >
                Submit
              </Button>
            </form>

Однако я могу отправить форму, если количество символов меньше пяти или даже больше 11. Как мне установить минимальные / максимальные значения?


reactjs material-ui
person user_78361084    schedule 16.06.2020    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Это должно сработать ...

...
<TextField
    inputProps={{ min: 5, max: 11, type:"number" }}
    onChange={e => setName(e.target.value)}
    required
/>
...

Это четко указано в документации, вы должны использовать inputProps для собственного атрибута ввода маленький i введите описание изображения здесь

person Harsh kurra    schedule 16.06.2020
comment
Не работает. То же самое .... позволяет мне в любом случае отправить форму - person user_78361084; 16.06.2020
comment
попробуйте добавить атрибут типа type:" number" вместе с min и max - person Harsh kurra; 16.06.2020

arrow_upward
2
arrow_downward

Атрибуты max и min работают с входами числового типа. Таким образом, вам нужно установить тип ввода как number, в дополнение к inputProps, являющемуся объектом атрибутов.

 <TextField
    inputProps={{ min: 5, max: 11, type: "number" }}
    onChange={e => setName(e.target.value)}
    required
  />
person artfulbeest    schedule 16.06.2020

arrow_upward
0
arrow_downward

Я считаю, что вы ищете minlength и maxlength:

<TextField
  id="standard-required"
  label="Required"
  inputProps={{
    minlength: 5,
    maxlength: 11,
    pattern: ".{5,11}", // if you have to support IE11
    title: "5 to 11 characters"
  }}
/>

Я предлагаю вам протестировать в разных браузерах поддержку этих атрибутов.

person Hangindev    schedule 16.06.2020