Реагировать на проблему проверки для значения рендеринга - PullRequest
Новая
       28

Реагировать на проблему проверки для значения рендеринга

1 голос
/ 26 апреля 2020

Я использую проверку реакции Yup, и у меня возникла проблема (форма редактирования) с проверкой при редактировании чего-либо. Даже если поля заполнены, валидатор ведет себя так, как будто они пустые. Я зарегистрировал состояние, и значения также появляются там .. Тот же код работает нормально без параметра value={contactPersonName || ""} ... См. Прикрепленное изображение 

import React from "react";
import { Formik, Field, Form, ErrorMessage } from "formik";
import * as Yup from "yup";
import MaintanaceRequestService from "../../service/tenant/MaintanaceRequestService";
import axios from "axios";
import { CheckSquare } from "react-feather";
import {
  Card,
  CardHeader,
  CardTitle,
  CardBody,
  Button,
  FormGroup,
  Col,
} from "reactstrap";

const formValidation = Yup.object().shape({
  contactPersonName: Yup.string().nullable().required("Required"),
  priority: Yup.number().required("Required"),
  contactPersonEmail: Yup.string()
    .email("Invalid email address")
    .required("Required"),
});

class MaintananceUpdate extends React.Component {
  state = {
    successAlert: true,
  };

  async componentDidMount() {
    let mess = "";
    await axios
      .post("http://localhost:8080/tenant/maint/preEdit/", {
        maintId: "1144",
      })

      .then((response) => {
        console.log(response.data.maintReq);
        mess = response.data.maintReq;

        this.setState({
          updatable: true,
          contactPersonName: mess.contactPersonName,
          contactPersonEmail: mess.contactPersonEmail,
        });
      });
  }

  render() {
    const { contactPersonName, contactPersonEmail } = this.state;

    return (
      <Card>
        <CardHeader>
          <CardTitle>Maintanance Request</CardTitle>
        </CardHeader>
        <CardBody>
          <Formik
            initialValues={{
              contactPersonEmail: "",
              contactPersonName: "",
            }}
            validationSchema={formValidation}
            onSubmit={(values, actions) => {
              values.issueType = values.issueType.value;

              console.log(values.priority);
              setTimeout(() => {
                MaintanaceRequestService.createRequest(values).then(
                  (response) =>
                    this.setState({
                      description: response.data.description,
                    })
                );
                console.log(values);

                this.successMessgae("successAlert", true);
                actions.setSubmitting(false);
              }, 1000);
            }}
          >
            {(props) => {
              const { handleSubmit, setFieldValue, handleBlur } = props;
              return (
                <Form onSubmit={props.handleSubmit}>
                  <FormGroup>
                    <label htmlFor="contactPersonName">Person Name</label>
                    <Field
                      className="form-control"
                      name="contactPersonName"
                      placeholder="Doe"
                      type="text"
                      value={contactPersonName || ""}
                      onChange={(e) =>
                        this.setState({ contactPersonName: e.target.value })
                      }
                      onBlur={handleBlur}
                    />
                    <ErrorMessage
                      name="contactPersonName"
                      component="div"
                      className="field-error text-danger"
                    />
                  </FormGroup>
                  <FormGroup>
                    <label htmlFor="contactPersonEmail">Email</label>
                    <Field
                      className="form-control"
                      name="contactPersonEmail"
                      placeholder="jane@acme.com"
                      type="email"
                      value={contactPersonEmail || ""}
                      onChange={(e) =>
                        this.setState({ contactPersonEmail: e.target.value })
                      }
                      onBlur={handleBlur}
                    />

                    <ErrorMessage
                      name="contactPersonEmail"
                      component="div"
                      className="field-error text-danger"
                    />
                  </FormGroup>

                  <FormGroup row>
                    <Col md={{ size: 8, offset: 4 }}>
                      <Button.Ripple
                        color="primary"
                        type="submit"
                        className="mr-1 mb-1"
                      >
                        <CheckSquare size={14} />
                        <span className="align-middle ml-25">Submit</span>
                      </Button.Ripple>
                    </Col>
                  </FormGroup>
                </Form>
              );
            }}
          </Formik>
        </CardBody>
      </Card>
    );
  }
}
export default MaintananceUpdate;

Изображение

Ответы [ 2 ]

1 голос
/ 26 апреля 2020

Вы используете свой собственный handleChange. Поэтому, как только вы закончите делать свои вещи в вашем handleChange, вызовите formik's handleChange. Если вы не вызовете handleChange formik, formik не будет знать об изменениях в вашем Field

...
const { handleSubmit, setFieldValue, handleBlur, handleChange } = props; // <----------- destructure formik's handleChange
return (
<Form onSubmit={props.handleSubmit}>
    <FormGroup>
        <label htmlFor="contactPersonName">Person Name</label>
        <Field
            className="form-control"
            name="contactPersonName"
            placeholder="Doe"
            type="text"
            value={contactPersonName || ""}
            onChange={(e) =>
            {
                this.setState({ contactPersonName: e.target.value })
                handleChange(e) // <----------- call formik's handleChange
            }
            }
            onBlur={handleBlur}
        />
0 голосов
/ 29 апреля 2020

Добавление enableReinitialize в formik решило мою проблему 

<Formik
          enableReinitialize
          ..
          render={
            ({
              ..
            }) => ( 
             //form uses initialValues
          )} />
...