我想在使用formik訂餐專案中實作一個用於驗證有效性的檢查表單，但是我遇到了建立兩個按鈕的問題。無論點擊哪個按鈕，都會呼叫handleSubmit。我該如何解決這個問題？
函數goBack只是將狀態設為false。
export default function Checkout(props) { function handleSubmit(event) { // event.preventDefault(); console.log("Hello"); } return ( {(props) => ( )} ); }
export default function CloseButton(props) { return ; }
export default function OrderButton(props) { return }
我希望CloseButton關閉表單並返回訂單列表，但它只呼叫由Formik元件建立的handleSubmit，而不是props中的函數。我閱讀了文檔，但關於使用兩個按鈕創建formik的內容以及與我的問題相關的內容都沒有提到。
看起來在
props.goBack中，你想引用元件的props，但實際上使用的是Formik 內部的props（因為它是最近的props聲明）。由於 Formik 的 props 上沒有定義goBack，所以你將undefined作為onClick處理程序傳遞給按鈕。解決這個問題最直接的方法是重命名其中一個 props 變量，我建議將 Formik 的 props 命名為
formikProps或類似的名稱。在我看來，更好的方法是解構 props（在這兩種情況下，雖然只有一種是必要的），像這樣：
export default function Checkout({ goBack }) { // ... return ( {(props) => ( // ... Back // ... )} ) }