Cliquer sur n'importe quel bouton déclenchera la fonction handleSubmit dans Formik

Question

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.

Answer 1

On dirait que le gestionnaire props.goBack 中，你想引用组件的 props，但实际上使用的是 Formik 内部的 props（因为它是最近的 props 声明）。由于 Formik 的 props 上没有定义 goBack，所以你将 undefined 作为 onClick est 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 formikProps ou 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>
  )
}