Durch Klicken auf eine beliebige Schaltfläche wird die handleSubmit-Funktion in Formik ausgelöst

Question

Ich möchte mit formik ein Prüfformular zur Validierung der Gültigkeit in einem Lebensmittelbestellprojekt implementieren, bin aber auf das Problem gestoßen, zwei Schaltflächen zu erstellen. Unabhängig davon, auf welche Schaltfläche geklickt wird, wird handleSubmit aufgerufen. Wie kann ich dieses Problem lösen?

Die Funktion goBack setzt den Status einfach auf 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>
}

Ich möchte, dass der CloseButton das Formular schließt und zur Auftragsliste zurückkehrt, aber er ruft nur das von der Formik-Komponente erstellte handleSubmit auf, nicht die Funktion in den Requisiten. Ich habe die Dokumentation gelesen, aber es wird nichts über die Erstellung einer Formik mit zwei Schaltflächen erwähnt und ist für meine Frage relevant.

Answer 1

看起来在 props.goBack 中，你想引用组件的 props，但实际上使用的是 Formik 内部的 props（因为它是最近的 props 声明）。由于 Formik 的 props 上没有定义 goBack，所以你将 undefined 作为 onClick 处理程序传递给按钮。

解决这个问题最直接的方法是重命名其中一个 props 变量，我建议将 Formik 的 props 命名为 formikProps 或类似的名称。

在我看来，更好的方法是解构 props（在这两种情况下，虽然只有一种是必要的），像这样：

export default function Checkout({ goBack }) {
  // ...
  return (
    <Formik>
      {(props) => (
        // ...
        <CloseButton type="button" onClick={goBack}>Back</CloseButton>
        // ...
      )}
    </Formik>
  )
}