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

尝试使用 span 包装并将evt.stopPropagation() 添加到 span 的 onClick

<span onClick={evt => evt.stopPropagation()}>
   <input id="thing" type="checkbox" onClick={this.func3} />                                   
   <label htmlFor="thing"> label for checkbox</label>
</span>

Answer 2

label 没有自己的点击处理程序，并且无法停止传播，因此当您点击label 时，会发生正常的事件冒泡。这意味着所有父级的事件处理程序都以正确的顺序调用。另外，由于htmlFor，checkbox点击处理程序也会被触发，但不是作为事件冒泡的一部分。

要解决此问题，请向仅包含.stopPropgation() (demo) 的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')
  },
  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 3

只需在标签上添加一个 onClick，具有相同的功能绑定即可。这是代码和相关的 JSBin：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')
);