表单提交独立于 React 中的按钮类型

Question

我有一个简单的代码：

kill = e => {
// do the killing
}

save = e => {
  e.preventDefault()
  console.info(e.currentTarget)
}

render(){
  return <form onSubmit={this.save}>
    <button key={new Date().getTime()} onDoubleClick={this.kill}>Delete</button>}
    <button type="submit" key={new Date().getTime() + 100}>Save</button>
  </form>
}

如果我单击 Delete 按钮，表单将被提交 -> 我会在控制台中看到它。

双击有效，但在此之前会调用 save() 方法。

我发现了这个错误 https://github.com/facebook/react/issues/8554，并尝试将唯一的 key 添加到每个按钮，但没有任何变化。

我错过了什么？

Answer 1

尝试将 type="button" 指定给您不想提交的按钮。

The default behavior of the button. Possible values are:

submit: The button submits the form data to the server. This is the default if the attribute is not specified for buttons associated with a , or if the attribute is an empty or invalid value.

reset: The button resets all the controls to their initial values, like . (This behavior tends to annoy users.)

button: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.

参考：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

Answer 2

我认为与此有关：Can I make a <button> not submit a form?

在按钮上设置 <button type="button" [..] 应该不提交表单。

表单提交独立于 React 中的按钮类型

Form submitts independently on button type in React

javascript

reactjs

form-submit

ondoubleclick