在反应页面上结合 onClick 和 type=submit

Posted 2023-03-23

【中文标题】在反应页面上结合 onClick 和 type=submit

【英文标题】：combining onClick and type=submit on react page

【发布时间】：2021-06-20 18:41:10

【问题描述】：

我在 next.js 应用程序中有一个使用 reactstrap 的反应表单。表单有一个以这种方式设置的提交按钮...

<Button
   type="submit"
   className="btn btn-block"
   disabled=!pwFormValidations.pwIsSubmittable
   onClick=(e) => doSomeStuffToSessionStorageVariables(e)
   >
Next
</Button>

如果我将onClick 与type=submit 结合使用会不会有问题？我担心如果表单移动得太快，我有时会错过onClick。我没有对用户在doSomeStuffToSessionStorageVariables 中输入的表单数据做任何事情，所以如果它不执行也没什么大不了的。

【问题讨论】：

为什么不在 handleSubmit 中添加 doSomeStuffToSessionStorageVariables 函数作为回调？

【参考方案1】：

由于您使用的是会话存储而不是任何需要验证的网络调用，因此使用onSubmit 将在提交表单之前完成函数调用：

<Form onSubmit=doSomeStuffToSessionStorageVariables>
  <Button ... /> // ⬅ no onClick needed here.
</Form>

const doSomeStuffToSessionStorageVariables = e => 
  sessionStorage.setItem('item', 'value');
  // everything above will execute before the form is submitted

我不确定您是否需要 doSomeStuff 的函数调用中的 e，但如果您需要该按钮，那么您也可以从事件本身获取它。