React hook form + Modal + data-bs-dismiss

Question

我想使用顺风模式，它使用 data-bs-dismiss 参数打开和关闭。

我戴上按钮：data-bs-dismiss='modal'

但是使用 react hook 形式，它并没有像我想要的那样工作。如果表单包含错误或输入错误，则执行了 data-bs-dismiss 而未关注表单错误。

我想在表单验证正常并且没有其他错误时关闭模式并提交。

如果有人有解决办法..谢谢我的代码：

const methods = useForm()

return(
    <FormProvider {...methods}>
       <form id={props.id} onSubmit={methods.handleSubmit(onSubmit)}>
        <input id='...'> ... <input/>
        <input id='...'> ... <input/>
        <input id='...'> ... <input/>
         ...
        <li>
            <Button
               btnId={`${props.btnContent}Btn`} 
               btnContent={props.btnContent} 
               btnClass='btn' 
               btnType='submit' 
               btnRipple 
               dismiss={'modal'} 
               form={props.id}
             />
         <li/>
       <form/>
   </FormProvider>
)

Answer 1

好吧，您可以做的是，您可以在 onSubmit 函数中检查任何 errors，而不是使用 dismiss。如果 form 有任何 errors 则保持 modal 打开，否则 submit the form 并关闭它。

React hook form + Modal + data-bs-dismiss

React hook form + Modal + data-bs-dismiss

reactjs

modal-dialog

react-hook-form

tailwind-ui