时间戳

首页 > 解决方案 > 表单根据 React 中的按钮类型独立提交

javascript - 表单根据 React 中的按钮类型独立提交

问题描述

我有一个简单的代码：

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到每个按钮，但没有任何改变。

我错过了什么？

标签： javascriptreactjsform-submitondoubleclick

解决方案

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

按钮的默认行为。可能的值有：

submit：按钮将表单数据提交到服务器。如果没有为与 a 关联的按钮指定属性，或者该属性为空值或无效值，则这是默认值。

重置：该按钮将所有控件重置为其初始值，例如 . （这种行为往往会惹恼用户。）

按钮：按钮没有默认行为，默认按下时不执行任何操作。它可以让客户端脚本监听元素的事件，这些事件在事件发生时触发。

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

推荐阅读