表单在React中单击错误按钮时提交

Strange, my entire component keeps submitting by clicking the incorrect button.

很奇怪,我的整个组件都会通过单击不正确的按钮继续提交。

The layout:

B Component is inside Component A. A Component has the form. B Component triggers the form submit and I dont know why.

B组件位于组件A中。组件具有表单。 B组件触发表单提交,我不知道为什么。

In the return function of A Component:

在A组件的返回功能中:

<form action... method...>
  <BComponent />
  <button type="submit">Submit</button>
</form>

B Component:

...

_removeFile: function(num){
  // issue if function is empty
},

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

render: function(){
  return(<div>{this._fileRender()}</div>)
}

...

So when I click the remove button, the form submits. Why? That button passes data to _removeFile(). Regardless if that function's empty or not, it still submits. e.preventDefault() does nothing. My knowledge at this stage is limited so excuse the silly mistake, if any.

因此,当我单击删除按钮时,表单会提交。为什么?该按钮将数据传递给_removeFile()。无论该功能是否为空,它仍然提交。 e.preventDefault()什么都不做。我在这个阶段的知识是有限的,所以请原谅这个愚蠢的错误,如果有的话。

Worst case is to put Component A's submit button into an onClick().

最糟糕的情况是将组件A的提交按钮放入onClick()。

2 个解决方案

#1

Any button will submit its parent form. This is what buttons do :)

任何按钮都会提交其父表单。这是按钮做的:)

If you need a button but want to prevent the default action you need to use event.preventDefault().

如果您需要一个按钮但想要阻止默认操作,则需要使用event.preventDefault()。

Since you prepopulate an argument to the function using .bind, the event object will be passed as the second argument:

由于您使用.bind预填充函数的参数,因此事件对象将作为第二个参数传递:

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

working demo: http://jsfiddle.net/69z2wepo/47187/

工作演示:http://jsfiddle.net/69z2wepo/47187/

#2

1.you may use <input type="button"/>, without event.preventDefault()

1.你可以使用,而不使用event.preventDefault()

your updated code > JSBin

您更新的代码> JSBin

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

in React documentation's examples you may notice that they prefer to use <input type="submit"/> and <input type="button"/>

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

2.in your map's callback you may use arrow func, in order to not bind

2.在地图的回调中,您可以使用箭头功能,以便不绑定

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

#1