Semantic-ui 复选框 onChange 事件未触发答案

【问题标题】：Semantic-ui checkbox onChange event not triggeredSemantic-ui 复选框 onChange 事件未触发
【发布时间】：2026-02-05 19:00:01
【问题描述】：

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

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 所指出的，react 的代码实际上应该可以工作，问题是我在某种程度上滥用了semantic-ui checkbox。

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

【问题讨论】：

其实是调用的，看控制台日志：jsfiddle.net/zza2furx
@nilgun 你是对的！显然问题在于semantic-ui's checkbox。删除类定义ui toggle checkbox 解决了这个问题。您的 jsfiddle 不包含语义 UI css/js，因此没有问题，帮助我实现了这一点。谢谢！
您的事件处理程序看起来也有点混乱。您可以使用 key="topup_enabled" 简化它并从event.dispatchMarker.split('.') 检索它。
请看这个更新的 jsfiddle jsfiddle.net/zza2furx/1

标签： checkbox onchange reactjs semantic-ui react-jsx

【解决方案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>
        )
    }
});

【讨论】：