使用mithril.js和jsx构建一些UI

Question

我对javascript和它的生态系统还不熟悉。我正在尝试使用mithril.js构建一些组件。我的目标是有一个组件，可以显示一些属性，并为每个属性提供几个按钮。只是为了了解一下mithril.js和jsx。以下是我到目前为止所做的：

const m = require("mithril");
var Something = {
  _increase: function(category) {
    console.log("increase category: "+category);
  },
  _decrease: function(category) {
    console.log("decrease category: "+category);
  },
  view: function(vnode) {
    return <div> 
      {Object.keys(vnode.attrs.categories).map((category)=> {
        return <div>
          <label for={category}>{category}</label>
          <input type="number" id={category} value={vnode.attrs.categories[category]} />
          <button type="button" onclick="{this._increase(category)}">MORE</button>
          <button type="button" onclick="{this._decrease(category)}">LESS</button>
        </div>
      })}
    </div>
  }
}
export default Something;

组件看起来工作正常，节点没有问题，标签、按钮和字段都显示在页面上，但是，当我点击一个按钮时，什么也没有发生。看起来事件没有被触发。怎么了？

Answer 1

两件事：(1)我认为你应该把函数放在onclick处理程序的大括号中，而不是把函数编码在字符串中。(2)看起来您立即调用了函数，而不是声明onclick处理程序是一个使用类别参数的函数。试着传入一个没有参数的匿名函数，这样当onclick事件被触发时，它就可以接受类别作为参数：

onclick={() => this._increase(category)}
onclick={() => this._decrease(category)}