Mengklik mana-mana butang akan mencetuskan fungsi handleSubmit dalam Formik

Question

Saya ingin melaksanakan borang semakan untuk mengesahkan kesahihan dalam projek tempahan makanan menggunakan formik, tetapi saya menghadapi masalah untuk mencipta dua butang. Tidak kira butang mana yang diklik, handleSubmit akan dipanggil. Bagaimanakah saya boleh menyelesaikan masalah ini?

Fungsi goBack hanya menetapkan status kepada palsu.

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

Saya mahu CloseButton menutup borang dan kembali ke senarai pesanan, tetapi ia hanya memanggil handleSubmit yang dibuat oleh komponen Formik, bukan fungsi dalam props. Saya membaca dokumentasi tetapi tidak ada yang disebut tentang membuat formik dengan dua butang dan berkaitan dengan soalan saya.

Answer 1

Nampak seperti pengendali props.goBack 中，你想引用组件的 props，但实际上使用的是 Formik 内部的 props（因为它是最近的 props 声明）。由于 Formik 的 props 上没有定义 goBack，所以你将 undefined 作为 onClick dihantar ke butang.

Cara paling langsung untuk menyelesaikan masalah ini adalah dengan menamakan semula salah satu pembolehubah props, saya cadangkan menamakan props Formik formikProps atau sesuatu yang serupa.

Pada pendapat saya, pendekatan yang lebih baik ialah memusnahkan prop (dalam kedua-dua kes, walaupun hanya satu yang diperlukan), seperti ini:

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