用 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)}

用 mithril.js 和 jsx 构建一些 UI

Build up some UI with mithril.js and jsx

javascript

jsx

mithril.js