简体   繁体   中英

Formik triggering errors and touched on non submit type button click. How can we only trigger when (type="submit") button clicked

My Formik is triggering touched on all fields of form when non submit type button gets clicked. I already know If this is not a submit button, we can add type="button" . But since it's a third-party component so I cannot change it, How can formik trigger submit only when the actual type="submit" button clicked?

                    <Formik
                        initialValues={initialValues}
                        validationSchema={validationSchema}
                        onSubmit={(values, actions) => {
                            console.log("submit", { values, actions });
                          
                        }}

                        enableReinitialize={true}
                    >
                        {(props) => {
                            return (
                                <Form onSubmit={props.handleSubmit}>
                                    <br />
                                <div class="row">
                            {/* Here this component contains buttons,I cannot add type="button" */}
                                  <SomethirdpartyLibWhichContainsButton />
                                </div>
                                    <div className="d-flex flex-row-reverse mx-3">
                                        <div >
                                            <button className="btn btn-primary" type="submit" >Submit</button>
                                        </div>
                                    </div>
                                    <p>erros: {JSON.stringify(props.errors)} </p>
                                </Form>
                            )
                        }
                        }
                    </Formik>

Added prevent default in div, it worked!

const handler = event => {
  event.preventDefault()
}

<div class="row" onClick={handler}>
    {/* Here this component contains buttons,I cannot add type="button" */}
        <SomethirdpartyLibWhichContainsButton />
</div> 

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM