Javascript 表单在错误的按钮上提交单击“反应”

奇怪的是，我的整个组件都是通过点击错误的按钮提交的

布局：

组件B位于组件A内部。组件A具有以下形式。B组件触发表单提交，我不知道为什么

在组件的返回函数中：

B部分：

因此，当我单击“删除”按钮时，表单将提交。为什么？该按钮将数据传递到_removeFile。不管函数是否为空，它仍然提交。e、 违约什么都不做。我在这个阶段的知识是有限的，所以请原谅这个愚蠢的错误，如果有的话

---

最坏的情况是将组件A的submit按钮放到onClick中。

任何按钮都将提交其父窗体。这就是按钮的作用：

如果需要按钮但要阻止默认操作，则需要使用event.preventDefault

由于使用.bind预填充函数的参数，事件对象将作为第二个参数传递：

 _removeFile: function(num, e){
     // do stuff with num
     e.preventDefault();
  },

---

工作演示：

任何按钮都将提交其父窗体。这就是按钮的作用：

如果需要按钮但要阻止默认操作，则需要使用event.preventDefault

由于使用.bind预填充函数的参数，事件对象将作为第二个参数传递：

 _removeFile: function(num, e){
     // do stuff with num
     e.preventDefault();
  },

工作演示：

1。您可以使用，而不使用event.preventDefault

在React文档中，您可能会注意到他们更喜欢使用和

2.在地图的回调中，为了不绑定，可以使用arrow func

1.您可以使用，无需使用event.preventDefault

在React文档中，您可能会注意到他们更喜欢使用和

2.在地图的回调中，为了不绑定，可以使用arrow func

---

你能提供组件的代码吗？太多了。我会看看我是否能缩小它以得到同样的错误。我过一会儿再回答。谢谢，我正在测试你的代码。我马上回复。你能提供组件的代码吗？太多了。我会看看我是否能缩小它以得到同样的错误。我过一会儿再回答。谢谢，我正在测试你的代码。我马上回复。我记得我把e放在了数字之前。哈！也许这就是为什么我一开始就没能成功。我稍后会试试这个。谢谢，我记得把e放在数字之前。哈！也许这就是为什么我一开始就没能成功。我稍后会试试这个。谢谢，是的。按钮，啊，是的。按钮

 _removeFile: function(num, e){
     // do stuff with num
     e.preventDefault();
  },

<input type="button" value="remove" onClick={this._removeFile.bind(this, x)}/>

 var files = this.state.fileDetails.map((f, x)=> 
      <div key={x}>
        <div className="">
          <button onClick={this._removeFile.bind(this, x)}>Remove</button>
        </div>
      </div>
  );