I want to implement a check form for validating validity in the food ordering project using formik, but I encountered the problem of creating two buttons. No matter which button is clicked, handleSubmit will be called. How can I solve this problem?
The function goBack just sets the status to 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 }
I want the CloseButton to close the form and return to the order list, but it only calls the handleSubmit created by the Formik component, not the function in the props. I read the documentation but nothing is mentioned about creating a formik with two buttons and is relevant to my question.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Looks like in
props.goBackyou want to reference the component'sprops, but you are actually using Formik's internalprops(because it is the most recentpropsdeclaration). SincegoBackis not defined on Formik's props, you are passingundefinedas theonClickhandler to the button.The most direct way to solve this problem is to rename one of the props variables. I recommend naming Formik's props
formikPropsor something similar.In my opinion, a better approach is to destructure the props (in both cases, although only one is necessary), like this:
export default function Checkout({ goBack }) { // ... return ( {(props) => ( // ... Back // ... )} ) }