Как я могу манипулировать проверкой форм реагирования Bootstrap? - PullRequest
Новая
       38

Как я могу манипулировать проверкой форм реагирования Bootstrap?

0 голосов
/ 05 января 2020

Я пытаюсь создать пользовательскую форму в ответ на bootstrap. Я могу манипулировать реквизитами isValid и isInvalid поля, но когда я пытаюсь отправить форму, кажется, что она не учитывает измененные состояния. Изменения isValid и isInvalid будут обрабатываться handleChange. Спасибо за вашу помощь:) 

const [validated, setValidated] = useState(false);

const handleSubmit = event => {
    const form = event.currentTarget;
    if (form.checkValidity() === false) {
      event.preventDefault();
      event.stopPropagation();
    }
    setValidated(true)
  }

function handleChange() {//would be used to custom validation and set isValid and isInvlaid}


        function renderForm() {
        return (
          <Form noValidate validated= {validated} onSubmit= {handleSubmit}>
            <Form.Row>
              <Form.Group as={Col} md={defaultBoxWidth} controlId="firstname" >
                <Form.Label style={headingStyle}>Vorname</Form.Label>
                <Form.Control
                  style={boxStyle}
                  name = "firstname"
                  onChange = {handleChange}
                  required
                  type="text"
                  placeholder="Max"
                  defaultValue= {accountInfos.firstname}
                  //isValid = {return value of handleChange()}
                  //isInvalid = {return value of handleChange()}
                />
                 <Form.Control.Feedback>{defaultValidText}</Form.Control.Feedback>
                <Form.Control.Feedback type="invalid">
                  {defaultInvalidText}
                </Form.Control.Feedback>

              </Form.Group>
              <Form.Group as={Col} md={defaultBoxWidth} controlId="lastname">
                <Form.Label style={headingStyle}>Nachname</Form.Label>
                <Form.Control
                  style={boxStyle}
                  required
                  type="text"
                  placeholder="Mustermann"
                  defaultValue= {accountInfos.lastname}
                  //isValid = {return value of handleChange()}
                  //isInvalid = {return value of handleChange()}
                />
                <Form.Control.Feedback>{defaultValidText}</Form.Control.Feedback>
                <Form.Control.Feedback type="invalid">
                  {defaultInvalidText}
                </Form.Control.Feedback>
              </Form.Group>
            </Form.Row>
            <Form.Row>

            </Form.Row>

            <div
              style={{
                display: "flex",
                justifyContent: "flex-end",
                alignItems: "baseline",
                flexWrap: "wrap"
              }}
            >
              <Button
                variant="success"
                type="submit"
                style={{ marginRight: "1rem" }}
              >
                Änderungen übernehmen
              </Button>
              <Button variant="danger" onClick={() => setShow(false)}>
                Änderungen verwerfen
              </Button>
            </div>
          </Form>
        );
      }
...