點擊任何按鈕都會觸發Formik中的handleSubmit函數

Question

我想在使用formik訂餐專案中實作一個用於驗證有效性的檢查表單，但是我遇到了建立兩個按鈕的問題。無論點擊哪個按鈕，都會呼叫handleSubmit。我該如何解決這個問題？

函數goBack只是將狀態設為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>
}

我希望CloseButton關閉表單並返回訂單列表，但它只呼叫由Formik元件建立的handleSubmit，而不是props中的函數。我閱讀了文檔，但關於使用兩個按鈕創建formik的內容以及與我的問題相關的內容都沒有提到。

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>
  )
}