Check condition before在React中显示toast通知

Question

我是新手，我试着提交一个表单。我验证了表单，当我单击提交按钮时，会出现一个toast通知，并说成功。但是，当我在表单字段中输入不正确的值并提交按钮时，吐司通知也会出现，并表示成功。但是当表单验证不给出任何错误时，我想出现在toast通知中。如何解决这个问题?这是为完成此任务而编写的代码。

function Forms() {
const apiUrl = '/addSellerOffer';
const initialValues = { value: '', expiryDate: '', quantity: '' };
const [formValues, setFormValues] = useState(initialValues);
const [formErrors, setFormErrors] = useState({});
const [isSubmitting, setIsSubmitting] = useState(false);
const history = useHistory();
const submitForm = () => {
const data = { value:formValues.value, expiryDate:formValues.expiryDate, quantity:formValues.quantity};
axios.post(apiUrl, data)
.then((result) => {
clear();
history.push(`/buyer/viewpostdetails/${id}`);
});
};
const handleChange = (e) => {
const { name, value } = e.target;
setFormValues({ ...formValues, [name]: value });
};
const handleSubmit = (e) => {
e.preventDefault();
setFormErrors(validate(formValues));
setIsSubmitting(true);
};
const validate = (values) => {
let errors = {};
if (!values.value) {
errors.value = "Cannot be blank";
}
if (!values.expiryDate) {
errors.expiryDate = "Cannot be blank";
}
if (!values.quantity) {
errors.quantity = "Cannot be blank";
}
return errors;
};
useEffect(() => {
if (Object.keys(formErrors).length === 0 && isSubmitting) {
submitForm();
}
}, [formErrors]);
const clear = () => {
setFormValues({ value: '', expiryDate: '', quantity: ''});
};
const { id } = useParams();
console.log(id);
return(
<div className="forms-b">
<div className="forms__container-b" >
<div className="container-b">
<div className="content-b">
<form className="buyer-form-b" onSubmit={handleSubmit} noValidate>
<div className="user-details-b">
<div className="input-box-b">
<span className="details-b">Offer Value</span>
<input type="text" name="value" id="value" placeholder="Enter value" value={formValues.value}
onChange={handleChange}
className={formErrors.value && "input-error"}></input>
{formErrors.value && (
<span className="error" style={{color:'red'}}>{formErrors.value}</span>
)}
</div>
<div className="input-box-b">
<span className="details-b">Expiry Date</span>
<input type="date" name="expiryDate" id="expiryDate" placeholder="Enter date" value={formValues.expiryDate}
onChange={handleChange}
className={formErrors.expiryDate && "input-error"}></input>
{formErrors.expiryDate && (
<span className="error" style={{color:'red'}}>{formErrors.expiryDate}</span>
)}
</div>
<div className="input-box-b">
<span className="details-b">Quantity</span>
<input type="text" name="quantity" id="quantity" placeholder="Enter quantity" value={formValues.quantity}
onChange={handleChange}
className={formErrors.quantity && "input-error"}></input>
{formErrors.quantity && (
<span className="error" style={{color:'red'}} >{formErrors.quantity}</span>
)}
</div>
</div>
<div className="button-b">
<input onClick={() =>
toast.info("You're added offer successfully !", {
transition: Slide
})
} type="submit" value="Send Offer"></input>
<ToastContainer position="top-right" toastStyle={{ backgroundColor: "green" }} autoClose={3000} />
</div>
</form>
</div>
</div>
</div>
</div>
);
}
export default Forms;

Answer 1

代码的问题是您已经无条件地将toast.info操作添加到提交按钮中。您应该将该部分移动到表单实际被提交的部分，即submitForm函数。因此，从输入onClick中删除toast.info部分，并将其添加到submitForm函数中，如下所示

const submitForm = () => {
const data = { value:formValues.value, expiryDate:formValues.expiryDate, quantity:formValues.quantity};
axios.post(apiUrl, data)
.then((result) => {
toast.info("You're added offer successfully !", { transition: Slide})
clear();
history.push(`/buyer/viewpostdetails/${id}`);
});
};