React div 容器 onClick 与复选框 onChange 冲突

在下面的 React 类中，我在 div 容器中有一个复选框。我想要单击容器来切换复选框。我也think我需要绑定复选框输入本身的 onChange ，以处理诸如用户使用制表符/空格来切换复选框状态之类的事情（如果我don't指定 onChange 因为这是受控组件）。

我的问题是both当我单击复选框本身时，事件处理程序会触发，因此复选框的状态实际上不会改变。我在handleCheckboxChange 中尝试过 e.preventDefault 和 e.stopPropagation 但似乎都没有做任何事情。

export default class Item extends React.Component{
    constructor(){
        super();
        this.state={
            IsSelected: false
        }
    }
    render(){
        return (
            <div className="item">
                <div className="checkbox-container" onClick={this.handleContainerClick.bind(this)}>
                    <input type="checkbox" checked={this.state.IsSelected} onChange={this.handleCheckboxChange.bind(this)} />
                </div>                  
            </div>
        );
    }
    handleCheckboxChange(e){
        this.setState({
            IsSelected: !this.state.IsSelected
        });
    }
    handleContainerClick(){
        this.setState({
            IsSelected: !this.state.IsSelected
        });     }
}

如果你想要包含<div>要“控制”复选框的值，则不要在复选框本身上放置任何处理程序。 React 将确保容器将接收子容器click events.

var CheckboxInClickableBox = React.createClass({
  getInitialState: function () {
    return {
      checked: false
    };
  },
  render: function () {
    return (
      <div onClick={this.onClick}>
        <span>{"Checked: " + this.state.checked}</span>

        <br />

        <input type="checkbox" checked={this.state.checked} />
      </div>
    );
  },
  onClick: function () {
    this.setState({
      checked: !this.state.checked
    });
  }
});

JSBin 上的示例 http://jsbin.com/pogejihapa/1/edit?js,output- 单击绿色框中的任意位置将触发切换。

另外，HTML 规定<label> with a for="pie"属性将通过click事件到任何<input id="pie">。使用上述方法时，这可能会“破坏”您的复选框 - 例如：

  render: function () {
    return (
      <div onClick={this.onClick}>
        <label htmlFor="pie">{"Checked: " + this.state.checked}</label>

        <br />

        <input id="pie" type="checkbox" checked={this.state.checked} />
      </div>
    );
  }

单击<label>将表现得好像有 2 个点击事件：

• 第一个是原来的click事件从冒泡<label> to the <div>并触发我们的onClick handler
• 第二个是<label>将其点击“委托”给<input>元素，由于for属性 （htmlFor在 React 中），然后冒泡并击中我们onClick handler

JSBin 上的示例 http://jsbin.com/cayucinequ/1/edit?js,output- 单击框中的任意位置除了<label>将触发切换。单击<label>将触发 2 个切换。