React ES5：1つのボタンが2つの関数を呼び出す

Question

2つの反応クラスにはボタンを使用してフォームを返すレンダリング関数があります。クラスBからフォームを使用できるように、クラスBをインポートする必要がありました。

私の問題：内部ボタンをクリックすると、外側ボタンもトリガーされますが、内部送信ボタン働く

私の試み：私はコンソールをチェックし、それは私に警告与えていることが判明：validateDOMNestingを：フォームは、フォームの子孫として出現することはできません。

私は研究を行い、問題はネストされたフォームの可能性があると考えました。だから私は、<div></div>にクラスBの<form></form>を変更することで、SOから回避策を見つけました。これはもはやフォームではありません。今はコンソール上でエラーが出ることはありませんが、問題はまだ残っています。内側のボタンをクリックすると、外側のボタンもトリガーされ、合計で2つの関数が呼び出されます。 （私は多分、タグを変更すると、ネストされたフォームの問題を変更しないか、多分私は他のクラスを参照する方法方法は完全に適切ではないん考えています私は本当にこのような現象を発生させるかを把握したい：私は助けを必要と

）

マイコード：を私は唯一の "handleRegAdd" 機能を起動する必要があり、クラスB、からボタンをクリックしたときに（

var classA = React.createClass({ 
    render: function() { 
    return (
     <div> 
     <form 
      className={this.props.className} 
      id={this.props.controllerSingular + '_form'} 
      onSubmit={this.handleSubmit} 
      ref="some_form" 
     > 
      <FieldSet> 
      <ClassB id={this.state.id} /> 
      </FieldSet> 
      <button onClick={this.submit} className="btn btn-primary"> 
      Save 
      </button> 
     </form> 
     </div> 
    ) 
    }, 
}) 

var classB = React.createClass({ 
    render: function() { 
    return (
     <div> 
     <button id="some_ID" className="some_name" onClick={this.handleRegAdd}> 
      Add 
     </button> 
     </div> 
    ) 
    }, 
    handleRegAdd: function() { 
    var that = this 
    var regLines = this.state.regulation 
    regLines.push({ 
     reg_id: null, 
     Type: $('.reg-type-select span.Select-value-label').text(), 
     id: that.props.id, 
     Hours: null, 
     Minutes: null, 
     Days: '', 
     Start: null, 
     End: null, 
    }) 

    this.setState({ 
     regulations: regLines, 
    }) 
    }, 
}) 

）私はそれを簡略化していることに注意してください。ただし、クラスAのサブミット機能を起動しました

Answer 1

このエラーはvalidateDOMNestingという警告には関係しません。

ボタンクリック（および他のDOMイベント）はコンポーネントツリーをバブルアップします。つまり、ボタンをクリックすると、のすべての親コンポーネントのonClickイベントが発生します。

イベントハンドラでevent.preventDefault()を呼び出すと、バブリングを停止できます。それは次のようになります。ボタンの

handleRegAdd: function(event) { 
    event.preventDefault() 

    // continue with the rest of your code 
} 

Answer 2

デフォルトtypeはそう単純buttonに種類を変更し、ボタンがフォームのonSubmitアクションを実行しない持っている、submitです：

<button type="button" id="some_ID" className="some_name" onClick={this.handleRegAdd}> 
    Add 
</button> 

私が言及しましたこれは私のコメントであり、このSOの質問でもカバーされています。HTML button to NOT submit form