Mithril.js绑定onchange后复选框无法切换状态的问题求助

你的问题核心在于Mithril虚拟DOM的同步机制：Mithril会在每次渲染时，将DOM元素的状态严格同步到你定义的checked属性值上。

你当前的代码里，checked绑定的是vnode.attrs.state——这个值在组件渲染后没有被更新，所以每次点击复选框触发事件后，Mithril重新渲染时，会把复选框的状态强制改回初始的state值，看起来就是复选框无法切换。

解决方案：让状态成为响应式的可更新值 #

你需要把复选框的状态存储在组件的内部状态（vnode.state）中，或者父组件的状态里，确保点击时能更新状态，从而触发Mithril的重新渲染，同步DOM状态。

修改后的组件代码

var Widget = {
  oninit: function(vnode) {
    // 从attrs获取初始状态，存入组件内部state
    vnode.state.isChecked = Boolean(vnode.attrs.state);
  },
  view: function(vnode) {
    return m("div", [ 
      m("input[type=checkbox]", {
        id: "cb" + vnode.attrs.id,
        // 绑定到组件内部的响应式状态
        checked: vnode.state.isChecked,
        onchange: function(e) {
          // 更新组件内部状态
          vnode.state.isChecked = e.target.checked;
          console.log(vnode.state.isChecked ? "ON" : "OFF");
          
          // 可选：如果需要同步到父组件/数据库，调用传入的回调
          if (vnode.attrs.onStateChange) {
            vnode.attrs.onStateChange(vnode.attrs.id, vnode.state.isChecked);
          }
        }
      }),
      m("span", vnode.attrs.name)
    ]);
  }
}

为什么这样能解决问题？ #

现在checked绑定的是组件内部的vnode.state.isChecked，点击复选框时会直接更新这个状态值。Mithril会自动检测到状态变化并触发重新渲染，此时checked的值已经是最新的，DOM会同步显示正确的选中状态。

若状态来自父组件/全局状态

如果你的复选框状态需要和父组件或全局状态同步，只需要在onchange事件里更新父级状态即可：

// 父组件示例
var Parent = {
  oninit: function(vnode) {
    // 模拟数据库获取的初始状态
    vnode.state.items = [
      {id: 1, name: "选项A", state: true},
      {id: 2, name: "选项B", state: false}
    ];
  },
  updateItemState: function(itemId, newState) {
    // 更新父组件状态，这里可以加入数据库同步逻辑
    const targetItem = vnode.state.items.find(item => item.id === itemId);
    if (targetItem) targetItem.state = newState;
  },
  view: function(vnode) {
    return m("div", 
      vnode.state.items.map(item => 
        m(Widget, {
          id: item.id,
          name: item.name,
          state: item.state,
          onStateChange: vnode.state.updateItemState.bind(vnode.state)
        })
      )
    );
  }
}

总结 #

这个问题不是Mithril的bug，而是没有遵循虚拟DOM的核心逻辑：UI是状态的映射。只有当状态发生变化时，UI才会同步更新。你之前的代码中状态没有变化，所以Mithril会强制保持UI的初始状态。

内容的提问来源于stack exchange，提问作者tcw