Создайте пользовательский интерфейс с помощью mithril.js и jsx

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