在可观察中:如何获得按钮单击以调用函数

Question

我正在使用"html"库函数生成行列表。我在每行上放了一个按钮，并希望它在单击时调用一个函数。我试过了：

html`<div>Line text <button type="button" onclick="myFunction()">Click</button></div>`

myFunction在笔记本中定义，但在单击按钮时不会调用它。我的使用在"html"中有几十行，而不仅仅是一行。

Answer 1

你也可以试试这个新的模板库，由 可观察的 htl - 超文本文字

模板

html`<button onclick=${() => ++mutable clicks}>click me</button>`

可变或您的函数

mutable clicks = 0

Answer 2

我搜索了更多，找到了Mike Bostock的这本笔记本，它在一个例子中间接回答了这个问题。我需要做的是：

{
const form = html`<form onsubmit="return false;">
<div>Line text <button name="myButton">Click</button></div>
</form>`;
form.myButton.onclick = () => {
// put the button click code here
};
return form;
}

我希望这对其他人有所帮助。

Answer 3

对于创建为inputs组件的按钮，只需将函数放入reducer选项中即可

viewof myButton = Inputs.button(
"Button Label Text",
{ reduce: myFunction }
)