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>

อย่างไรก็ตาม ฉันสามารถส่งแบบฟอร์มได้หากจำนวนอักขระน้อยกว่า 5 ตัวหรือมากกว่า 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" พร้อมกับค่าต่ำสุดและสูงสุด - person Harsh kurra; 16.06.2020

arrow_upward
2
arrow_downward

แอตทริบิวต์สูงสุดและต่ำสุดใช้ได้กับอินพุตประเภทตัวเลข ดังนั้นคุณต้องตั้งค่าประเภทอินพุตเป็นตัวเลข นอกเหนือจาก 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