在 React 页面上结合 onClick 和 type=submit

Question

我在 next.js 应用程序中有一个使用 reactstrap 的 React 表单。表单有一个这样设置的提交按钮...

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

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

Answer 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，但如果您需要按钮，那么您也可以从事件本身。

在 React 页面上结合 onClick 和 type=submit

combining onClick and type=submit on react page

reactjs

next.js

reactstrap