React - テーブル内のラベルクリックの伝播を停止できません。

Question

以下の例では、内部にチェックボックスを持つ簡単な<table>があります。私はtd、trとチェックボックスでクリックイベントを持っています。私はチェックボックスをクリックしてtdとtrへのバブルを止めることができるようにしたい。単純な "event.stopPropagation（）"はうまく動作します。

"htmlFor"を使用してチェックボックスに<label>を接続すると、ラベルがクリックされたときにイベントがバブリングを止めることはありません（チェックボックス自体がクリックされても期待どおりに動作します） 。さらに、不思議なことに、バブルは奇妙な順序で起こるようです（チェックボックスのクリックは最後に受信されます）。

var Hello = React.createClass({ 
    func1(e){ 
    console.log('tr was clicked') 
    }, 
    func2(e){ 
    console.log('td was clicked') 
    }, 
    func3(e){ 
    e.stopPropagation(); 
    console.log('Checkbox was clicked') 
    }, 
    render: function() { 
    return <table> 
     <tbody> 
     <tr onClick={this.func1}> 
      <td onClick={this.func2}> 
      <input id="thing" type="checkbox" onClick={this.func3} />         
      <label htmlFor="thing"> label for checkbox</label> 
      </td> 
     </tr> 
     </tbody> 
    </table>; 
    } 
}); 

ReactDOM.render(
    <Hello name="World" />, 
    document.getElementById('container') 
); 

...そして、ここフィドルます：ここで

はコードだ https://jsfiddle.net/69z2wepo/52785/ （クリックイベント用のコンソールを見る）

Answer 1

labelは、それ自身のクリックハンドラを持っていない、と伝播を停止することはできませんので、あなたがクリックしたときにlabel通常のイベントバブリングが行われ、：ここでは、コードと関連JSBinです。つまり、親のすべてのイベントハンドラが正しい順序で呼び出されます。また、htmlForのため、checkboxクリックハンドラもトリガされますが、イベントのバブリングの一部としてはトリガされません。のみ.stopPropgation()（demo）が含まれlabelに別々のクリックハンドラを追加し、問題を解決するために

：暗黙的に（ラベルをクリック用と1：

var Hello = React.createClass({ 
    func1(e){ 
    console.log('tr was clicked') 
    }, 
    func2(e){ 
    console.log('td was clicked') 
    }, 
    func3(e){ 
    e.stopPropagation(); 
    console.log('Checkbox was clicked') 
    }, 
    stopLabelPropagation(e) { 
    e.stopPropagation(); 
    }, 
    render: function() { 
    return <table> 
     <tbody> 
     <tr onClick={this.func1}> 
      <td onClick={this.func2}> 
      <input id="thing" type="checkbox" onClick={this.func3} />          
      <label htmlFor="thing" onClick={ this.stopLabelPropagation }>label for checkbox</label> 
      </td> 
     </tr> 
     </tbody> 
    </table>; 
    } 
}); 

ReactDOM.render(
    <Hello name="World" />, 
    document.getElementById('container') 
); 

Answer 2

はちょうど同じで、ラベル上のonClickを追加します関数バインドが役立っています。 https://jsbin.com/caneqi/2/edit?html,js,output

var Hello = React.createClass({ 
    func1(e){ 
    console.log('tr was clicked') 
    }, 
    func2(e){ 
    console.log('td was clicked') 
    }, 
    func3(e){ 
    e.stopPropagation(); 
    console.log('Checkbox was clicked') 
    }, 
    render: function() { 
    return <table> 
     <tbody> 
     <tr onClick={this.func1}> 
      <td onClick={this.func2}> 
      <input id="thing" type="checkbox" onClick={this.func3} />         
      <label htmlFor="thing" onClick={this.func3}> label for checkbox</label> 
      </td> 
     </tr> 
     </tbody> 
    </table>; 
    } 
}); 

ReactDOM.render(
    <Hello name="World" />, 
    document.getElementById('container') 
);