InputProps min dan max tidak diterapkan

Saya memiliki Formulir berikut:

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>

Namun, saya bisa mengirimkan formulir jika jumlah karakter kurang dari lima atau bahkan lebih dari 11. Bagaimana cara menerapkan nilai min/maks?


reactjs material-ui
person user_78361084    schedule 16.06.2020    source sumber

Jawaban (3)


arrow_upward
2
arrow_downward

Ini seharusnya berhasil...

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

Disebutkan dengan jelas dalam dokumentasi, Anda harus menggunakan inputProps untuk atribut masukan asli, kecil i masukkan deskripsi gambar di sini

person Harsh kurra    schedule 16.06.2020
comment
Tidak berhasil. Hal yang sama....memungkinkan saya mengirimkan formulir - person user_78361084; 16.06.2020
comment
coba tambahkan atribut tipe type:" number" bersama dengan min dan maks - person Harsh kurra; 16.06.2020

arrow_upward
2
arrow_downward

Atribut max dan min berfungsi pada input tipe angka. Jadi, Anda perlu mengatur tipe input ke angka, selain inputProps dan objek atribut.

 <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

Saya yakin yang Anda cari adalah minlength dan 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"
  }}
/>

Saya menyarankan Anda untuk menguji pada browser yang berbeda untuk dukungan atribut ini.

person Hangindev    schedule 16.06.2020