我创建了一个表单,我希望文件上传是可选的,它位于 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>