Question

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

布局：

B Component位于Component A内。 A Component有表格。 B Component触发表单提交，我不知道为什么。

在A Component的返回功能中：

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

B组件：

...

_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>)
}

...

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

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

Answer 1

任何按钮都会提交其父表单。这是按钮的作用：）

如果您需要按钮但希望阻止默认操作，则需要使用event.preventDefault()。

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

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

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

Answer 2

1 。您可以使用 <input type="button"/>，没有event.preventDefault（）

<强> your updated code > JSBin

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

在React文档的examples中，您可能会注意到他们更愿意使用<input type="submit"/> and <input type="button"/>

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>
  );

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

2 个答案: