我如何单击按钮并使用函数 (Svelte) 添加或减去值

Question

我是 Svelte 的新手。单击 + 和 - 按钮时，我已经编写了用于在文本框中增加和减少值的函数。但我尝试点击 + 和 - 按钮，但它没有任何反应。请帮助我。此代码如下：

<script>
    var name;
    var count = {
        cetiya : 0,
        other : 0
    };
    function addNumPray(name) {
        console.log(name);
        if (name == "a") {
            count.cetiya += 1;
        } else {
            count.other += 1;
        }
    }

    function minusNumPray(name) {
        console.log(name);
        if (name == "a") {
            count.cetiya -= 1;
        } else {
            count.other -= 1;
        }
    }
</script>



<div>
    <button on:click={minusNumPray("a")}>-</button>
  <input type="text" name="numPrayAtCetiya" size="7" bind:value={count.cetiya}>
  <button on:click={addNumPray("a")}>+</button>
</div>
<div>
    <button on:click={minusNumPray("b")}>-</button>
  <input type="text" name="numPrayAtOther" size="7" bind:value={count.other}>
  <button on:click={addNumPray("b")}>+</button>
</div>

Answer 1

使用箭头函数调用带参数的函数

<script>
    var name;
    var count = {
        cetiya : 0,
        other : 0
    };
    function addNumPray(name) {
        console.log(name);
        if (name == "a") {
            count.cetiya += 1;
        } else {
            count.other += 1;
        }
    }

    function minusNumPray(name) {
        console.log(name);
        if (name == "a") {
            count.cetiya -= 1;
        } else {
            count.other -= 1;
        }
    }
</script>



<div>
    <button on:click={() => minusNumPray("a")}>-</button>
  <input type="text" name="numPrayAtCetiya" size="7" bind:value={count.cetiya}>
  <button on:click={() => addNumPray("a")}>+</button>
</div>
<div>
    <button on:click={() => minusNumPray("b")}>-</button>
  <input type="text" name="numPrayAtOther" size="7" bind:value={count.other}>
  <button on:click={() => addNumPray("b")}>+</button>
</div>

Answer 2

在您的 on:click 中，您必须编写一个函数，目前您使用的是函数调用，它将在渲染时触发，并将其结果存储在点击事件中。要触发一个函数，正确的方法是：

<button on:click={() => addNumPrary("b")}>+</button>

Answer 3

是你要找的吗

<button on:click="{increaseNum}">➕</button>
<button on:click="{decreaseNum}">➖</button>
<input value="{count}" size="5"/>

<script>
  let count = 0
  let increaseNum = () => count += 1    
  let decreaseNum = () => count -= 1    
</script>

另一种方式

<button on:click={() => count += 1}>➕</button>
<button on:click={() => count -= 1}>➖</button>
<input value={count} size='5'/>

<script> let count = 0 </script>

我如何单击按钮并使用函数 (Svelte) 添加或减去值

How can i click button and add or minus value by using function (Svelte)

svelte