未触发Semantic事件的Semantic-ui复选框

Question

我正在尝试更改复选框的状态：

var React = require('react');

var UserTable = React.createClass({

  handleCheckboxChange: function(field) {
    return function(e) {
      var value = !e.target.checked;
      // this updates the state in the parent module
      this.props.onUserUpdate(field, value);
      // this persists the state to the server
      this.props.onUserSave(field);
    }.bind(this);
  },


  render: function() {
    var user = this.props.data;
    return (
      <div className="ui toggle checkbox">
        <input type="checkbox" onChange={this.handleCheckboxChange("topup_enabled")} checked={user.topup_enabled} />
        <label></label>
      </div>
    );
  }

});

调试这个，我看到永远不会调用handleCheckboxChange。

知道为什么吗？

修改

正如@nilgun指出的那样，反应的代码实际上应该有效，问题是我在某种程度上误用了semantic-ui checkbox。

看到这个jsfiddle： http://jsfiddle.net/zza2furx/1/

Answer 1

问题可以通过以下方式解决：

var MyCheckBox = React.createClass({
    getInitialState: function() {
        return {
            checked:false
        }
    },

    handleChange: function(event) {
        this.setState({checked: !this.state.checked});
    },

    render: function() {
        return (
            <div className="ui toggle checkbox" onClick={this.handleChange} />
                <input type="checkbox" value={this.state.checked} />
            </div>
        )
    }
});