Formik触发错误并触及非提交类型按钮单击。我们如何只能在单击(类型= "submit")按钮时触发

Question

当点击非提交类型按钮时，我的Formik会触发表单的所有字段。我已经知道，如果这不是一个提交按钮，我们可以添加type="button"。但由于它是第三方组件，所以我不能更改它，如何只有当实际的type="submit"按钮点击时formik才能触发提交？

<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>

Answer 1

在div中添加了防止默认值，效果很好！

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