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.
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
看起来在
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> ) }