html - 表单操作和 onclick 按钮

Question

我有一个带有动作的表单（注意我使用的是 reactstrap）：

<Form action="/api/exercises" method="post" >

这是表单中的提交按钮：

<Button type="submit" color="primary" onClick={this.addExercise} block>
                Add Exercise
              </Button>

我需要能够同时运行 onclick 函数和表单操作。我注意到如果我两者都有，那么它会运行 onclick 函数。如果我取出 onclick 功能，那么表单操作将起作用。关于如何同时运行表单操作和 onClick 函数的任何想法？

标签： htmlreactjsforms

Answer 1

尝试这个。首先移除 Button 中的 onClick 事件。并在 Form 上添加 onSubmit 事件

<Form action="/api/exercises" onSubmit={this.onSubmit} method="post" >


onSubmit = (e) => {
  e.preventDefault()
  // do stuff
  e.target.submit()
}

一个工作演示：https ://codesandbox.io/s/ovqmnjyj2q