Je souhaite implémenter un formulaire de contrôle pour valider la validité dans un projet de commande de nourriture utilisant formik, mais j'ai rencontré le problème de la création de deux boutons. Quel que soit le bouton sur lequel vous cliquez, handleSubmit sera appelé. Comment puis-je résoudre ce problème?
La fonction goBack définit simplement le statut sur false.
export default function Checkout(props) {
function handleSubmit(event) {
// event.preventDefault();
console.log("Hello");
}
return (
<Formik
initialValues={{ userName: "Hi", street: "", postalCode: "", city: "" }}
onSubmit={handleSubmit}
>
{(props) => (
<Form className={styles["form"]}>
<div className={styles["form-control"]}>
<div className={styles["form-control__input"]}>
<label htmlFor="userName">Your name</label>
<Field type="text" name="userName" id="userName"></Field>
</div>
<div className={styles["form-control__input"]}>
<label htmlFor="street">Street</label>
<Field type="text" name="street" id="street"></Field>
</div>
<div className={styles["form-control__input"]}>
<label htmlFor="postalCode">Postal code</label>
<Field type="text" name="postalCode" id="postalCode"></Field>
</div>
<div className={styles["form-control__input"]}>
<label htmlFor="city">City</label>
<Field type="text" name="city" id="city"></Field>
</div>
</div>
<div className={styles["form-actions"]}>
<CloseButton type="button" onClick={props.goBack}>Back</CloseButton>
<OrderButton type="submit">Confirm</OrderButton>
</div>
</Form>
)}
</Formik>
);
}
export default function CloseButton(props) {
return <button type={props.type} onClick={props.onClick} className={styles["close-button"]}>{props.children}</button>;
}
export default function OrderButton(props) {
return <button type={props.type} onClick={props.onClick} className={styles['order-button']}>{props.children}</button>
}
Je veux que CloseButton ferme le formulaire et revienne à la liste des commandes, mais il appelle uniquement le handleSubmit créé par le composant Formik, pas la fonction dans les accessoires. J'ai lu la documentation mais rien n'est mentionné sur la création d'un formik avec deux boutons et n'est pas pertinent par rapport à ma question.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
On dirait que le gestionnaire
props.goBack中，你想引用组件的props，但实际上使用的是 Formik 内部的props（因为它是最近的props声明）。由于 Formik 的 props 上没有定义goBack，所以你将undefined作为onClickest transmis au bouton.Le moyen le plus direct de résoudre ce problème est de renommer l'une des variables des accessoires, je recommande de nommer les accessoires de Formik
formikPropsou quelque chose de similaire.À mon avis, une meilleure approche consiste à déstructurer les accessoires (dans les deux cas, même si un seul est nécessaire), comme ceci :
export default function Checkout({ goBack }) { // ... return ( <Formik> {(props) => ( // ... <CloseButton type="button" onClick={goBack}>Back</CloseButton> // ... )} </Formik> ) }