いずれかのボタンをクリックすると、Formik の handleSubmit 関数がトリガーされます。

Question

formikを使用した食品注文プロジェクトで正当性を検証するためのチェックフォームを実装したいのですが、ボタンを2つ作成するという問題が発生しました。どのボタンをクリックしても、handleSubmit が呼び出されます。この問題はどうすれば解決できますか?

関数 goBack はステータスを false に設定するだけです。

リーリー リーリー リーリー

CloseButton でフォームを閉じて注文リストに戻るようにしたいのですが、このボタンは、Props 内の関数ではなく、Formik コンポーネントによって作成された handleSubmit のみを呼び出します。ドキュメントを読みましたが、2つのボタンを持つformikの作成については何も言及されておらず、私の質問に関連しています。

Answer 1

props.goBack ではコンポーネントの props を参照したいように見えますが、実際には Formik の内部 props を使用しています (これは最新のものであるため) props 宣言)。 goBack は Formik の props で定義されていないため、unknown を onClick ハンドラーとしてボタンに渡します。

この問題を解決する最も直接的な方法は、props 変数の名前を変更することです。Formik の props に formikProps などの名前を付けることをお勧めします。

私の意見では、より良いアプローチは、次のように props を分解することです (どちらの場合も必要なのは 1 つだけですが):

リーリー