0

我创建了一个表单,我希望文件上传是可选的,它位于 React 和 ReactBootstrap 中。但是当我不上传文件时,表格没有被提交。

我正在使用自定义表单验证,它工作正常。另外,我在这里尝试将单个文件上传到后端,这也可以正常工作。但是我无法在没有文件上传的情况下提交表单。

我不知道这里出了什么问题,任何帮助将不胜感激。

const Contact = () => {
  const [files, setFiles] = useState(null);
  const [successful, setSuccessful] = useState(false);
  const [form, setForm] = useState({});
  const [errors, setErrors] = useState({});

  const setField = (field, value) => {
    setForm({
      ...form,
      [field]: value,
    });

    if (!!errors[field])
      setErrors({
        ...errors,
        [field]: null,
      });
  };

  const { firstName, lastName, email, city, company, howCanWeHelp, NDA } = form;

  const findFormErrors = () => {
    const newErrors = {};

    if (!firstName || firstName === "") newErrors.firstName = "cannot be blank";
    if (!lastName || lastName === "") newErrors.lastName = "cannot be blank";
    if (!email || !email.includes("@")) newErrors.email = "enter a valid email";
    if (!company || company === "") newErrors.company = "cannot be blank";
    if (!howCanWeHelp || howCanWeHelp === "")
      newErrors.howCanWeHelp = "cannot be blank";

    return newErrors;
  };

  const onFileUpload = async (e) => {
    setFiles(e.target.files[0]);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    const newErrors = findFormErrors();

    if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
    } else {
      const formData = new FormData();
      formData.append("firstName", firstName);
      formData.append("lastName", lastName);
      formData.append("email", email);
      formData.append("city", city);
      formData.append("company", company);
      formData.append("howCanWeHelp", howCanWeHelp);
      formData.append("NDA", NDA);
      formData.append("file", files);

      const companyForm = `${process.env.REACT_APP_PUBLIC_REQUEST}/company-form`;

      await Axios.post(companyForm, formData, {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      })
        .then(() => {
          setSuccessful(true);
        })
        .catch((error) => console.error(error));
    }
  };

  return (
    <div className={`${styles.container}`}>
      <Form onSubmit={handleSubmit}>
        <Row className={styles["contact__row"]}>
          <Col className={styles["contact__form-content"]}>
            <h2>Contact Us</h2>

            <Form.Group className="mb-3">
              <Form.Label>First Name*</Form.Label>
              <Form.Control
                onChange={(e) => setField("firstName", e.target.value)}
                type="text"
                isInvalid={!!errors.firstName}
              />
              <Form.Control.Feedback type="invalid">
                {errors.firstName}
              </Form.Control.Feedback>
            </Form.Group>

            <Form.Group className="mb-3">
              <Form.Label>Last Name*</Form.Label>
              <Form.Control
                onChange={(e) => setField("lastName", e.target.value)}
                type="text"
                isInvalid={!!errors.lastName}
              />
              <Form.Control.Feedback type="invalid">
                {errors.lastName}
              </Form.Control.Feedback>
            </Form.Group>

            <Form.Group className="mb-3">
              <Form.Label>Email*</Form.Label>
              <Form.Control
                onChange={(e) => setField("email", e.target.value)}
                type="text"
                isInvalid={!!errors.email}
              />
              <Form.Control.Feedback type="invalid">
                {errors.email}
              </Form.Control.Feedback>
            </Form.Group>

            <Form.Group className="mb-3">
              <Form.Label>City:</Form.Label>
              <Form.Control
                onChange={(e) => setField("city", e.target.value)}
                type="text"
              />
            </Form.Group>

            <Form.Group className="mb-3">
              <Form.Label>Company:</Form.Label>
              <Form.Control
                onChange={(e) => setField("company", e.target.value)}
                type="text"
                isInvalid={!!errors.company}
              />
              <Form.Control.Feedback type="invalid">
                {errors.company}
              </Form.Control.Feedback>
            </Form.Group>

            <Form.Group className="mb-3">
              <Form.Label>How we can help you?*</Form.Label>
              <Form.Control
                onChange={(e) => setField("howCanWeHelp", e.target.value)}
                as="textarea"
                row={4}
                isInvalid={!!errors.howCanWeHelp}
              />
              <Form.Control.Feedback type="invalid">
                {errors.howCanWeHelp}
              </Form.Control.Feedback>
            </Form.Group>

            <Form.Group className="mb-3">
              <Form.Label>Attach your files here:</Form.Label>
              <Form.Control onChange={onFileUpload} type="file" />
            </Form.Group>

            <div className={styles["contact__button-checkbox"]}>
              <Form.Group className="mb-3">
                <Form.Check
                  defaultChecked={NDA}
                  onChange={(e) => {
                    setField("NDA", e.target.checked);
                  }}
                  type="checkbox"
                  label="Send NDA"
                />
              </Form.Group>
              <Button
                disabled={successful}
                type="submit"
                variant="outline-dark"
              >
                {successful ? "Sent Successfully" : "SEND"}
              </Button>
            </div>
          </Col>
4

1 回答 1

0

由于您在每次点击提交时都进行验证,因此您的某些验证可能会失败,因为您觉得您的提交不起作用。尝试调试您的验证并将以下行放在 findFormErrors 函数中并提供反馈:

const { firstName, lastName, email, city, company, howCanWeHelp, NDA } = form;   

代码:

const Contact = () => {
  const [files, setFiles] = useState(null);
  const [successful, setSuccessful] = useState(false);
  const [form, setForm] = useState({});
  const [errors, setErrors] = useState({});

  const setField = (field, value) => {
    setForm({
      ...form,
      [field]: value,
    });

    if (!!errors[field])
      setErrors({
        ...errors,
        [field]: null,
      });
  };

 

  const findFormErrors = () => {
     const { firstName, lastName, email, city, company, howCanWeHelp, NDA } = form; // place it here
    const newErrors = {};

    if (!firstName || firstName === "") newErrors.firstName = "cannot be blank";
    if (!lastName || lastName === "") newErrors.lastName = "cannot be blank";
    if (!email || !email.includes("@")) newErrors.email = "enter a valid email";
    if (!company || company === "") newErrors.company = "cannot be blank";
    if (!howCanWeHelp || howCanWeHelp === "")
      newErrors.howCanWeHelp = "cannot be blank";

    return newErrors;
  };

  const onFileUpload = async (e) => {
    setFiles(e.target.files[0]);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    const newErrors = findFormErrors();

    if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
    } else {
      const formData = new FormData();
      formData.append("firstName", firstName);
      formData.append("lastName", lastName);
      formData.append("email", email);
      formData.append("city", city);
      formData.append("company", company);
      formData.append("howCanWeHelp", howCanWeHelp);
      formData.append("NDA", NDA);
      formData.append("file", files);

      const companyForm = `${process.env.REACT_APP_PUBLIC_REQUEST}/company-form`;

      await Axios.post(companyForm, formData, {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      })
        .then(() => {
          setSuccessful(true);
        })
        .catch((error) => console.error(error));
    }
  };

  return (
    <div className={`${styles.container}`}>
      <Form onSubmit={handleSubmit}>
        <Row className={styles["contact__row"]}>
          <Col className={styles["contact__form-content"]}>
            <h2>Contact Us</h2>

            <Form.Group className="mb-3">
              <Form.Label>First Name*</Form.Label>
              <Form.Control
                onChange={(e) => setField("firstName", e.target.value)}
                type="text"
                isInvalid={!!errors.firstName}
              />
              <Form.Control.Feedback type="invalid">
                {errors.firstName}
              </Form.Control.Feedback>
            </Form.Group>

            <Form.Group className="mb-3">
              <Form.Label>Last Name*</Form.Label>
              <Form.Control
                onChange={(e) => setField("lastName", e.target.value)}
                type="text"
                isInvalid={!!errors.lastName}
              />
              <Form.Control.Feedback type="invalid">
                {errors.lastName}
              </Form.Control.Feedback>
            </Form.Group>

            <Form.Group className="mb-3">
              <Form.Label>Email*</Form.Label>
              <Form.Control
                onChange={(e) => setField("email", e.target.value)}
                type="text"
                isInvalid={!!errors.email}
              />
              <Form.Control.Feedback type="invalid">
                {errors.email}
              </Form.Control.Feedback>
            </Form.Group>

            <Form.Group className="mb-3">
              <Form.Label>City:</Form.Label>
              <Form.Control
                onChange={(e) => setField("city", e.target.value)}
                type="text"
              />
            </Form.Group>

            <Form.Group className="mb-3">
              <Form.Label>Company:</Form.Label>
              <Form.Control
                onChange={(e) => setField("company", e.target.value)}
                type="text"
                isInvalid={!!errors.company}
              />
              <Form.Control.Feedback type="invalid">
                {errors.company}
              </Form.Control.Feedback>
            </Form.Group>

            <Form.Group className="mb-3">
              <Form.Label>How we can help you?*</Form.Label>
              <Form.Control
                onChange={(e) => setField("howCanWeHelp", e.target.value)}
                as="textarea"
                row={4}
                isInvalid={!!errors.howCanWeHelp}
              />
              <Form.Control.Feedback type="invalid">
                {errors.howCanWeHelp}
              </Form.Control.Feedback>
            </Form.Group>

            <Form.Group className="mb-3">
              <Form.Label>Attach your files here:</Form.Label>
              <Form.Control onChange={onFileUpload} type="file" />
            </Form.Group>

            <div className={styles["contact__button-checkbox"]}>
              <Form.Group className="mb-3">
                <Form.Check
                  defaultChecked={NDA}
                  onChange={(e) => {
                    setField("NDA", e.target.checked);
                  }}
                  type="checkbox"
                  label="Send NDA"
                />
              </Form.Group>
              <Button
                disabled={successful}
                type="submit"
                variant="outline-dark"
              >
                {successful ? "Sent Successfully" : "SEND"}
              </Button>
            </div>
          </Col>
于 2022-03-01T06:08:46.500 回答