フォームが間違ったボタンをクリックして反応します

Question

奇妙なことに、私のコンポーネント全体が間違ったボタンをクリックして送信し続けます。

レイアウト：

B ComponentはComponent Aの内側にあります。 A Componentにはフォームがあります。 B 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オブジェクトは、2番目の引数として渡されます：

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

作業のデモ：http://jsfiddle.net/69z2wepo/47187/

Answer 2

。あなたは、彼らが<input type="submit"/> and <input type="button"/>

---

を使用することを好むことがあり

your updated code > JSBinで

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

は、ドキュメントのexamplesに反応event.preventDefault（）なし<input type="button"/>、を使用することができ

。マップのコールバックあなたが結合しないために、矢印funcを使用することでは

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