单独更改按钮的颜色

Question

我有一些按钮，当我点击每个按钮时，背景颜色应该会改变。现在，它会在单击一个按钮时更改所有按钮的颜色。但是，它应该单独用于每个按钮。有人知道怎么做吗？

这是我的主要身材 class:

<script lang="ts">
  import Button from './Button.svelte';
  let empty = false;

  function changeBtnState() {
    if (empty) {
      empty = false;
    } else {
      empty = true;
    }
  }
</script>

<Button label="process" {empty} onClickFn={changeBtnState} />
<Button label="date" {empty} onClickFn={changeBtnState} />

<style lang="scss">
    .main-button.empty {
        background-color: red;
    }
</style>

这就是我的按钮组件

<script lang="ts">
    export let label: string = 'test';
    export let onClickFn: () => void = () => {
      return;
    };
    export let empty = false;
</script>

<button
  type="submit"
  class="main-button"
  class:empty={empty}
  on:click={onClickFn}>{label}</button
>

<style lang="scss">
    .main-button{
        background-color: #f2eee2;
    }
</style>

Answer 1

问题是您将两个按钮的空属性绑定到同一个变量：

<Button label="process" {empty} onClickFn={changeBtnState} />
<Button label="date" {empty} onClickFn={changeBtnState} />

每个按钮都需要一个单独的按钮。

Answer 2

您可以做的是将 changeBtnState 集成到 Button 组件中。因此，空变量是在组件中定义的，并且每个组件都不同。如果您不想将它集成到一个组件中，另一种选择是创建一个“空”变量数组（每个按钮 1 个）。

单独更改按钮的颜色

Svelte change color of buttons indivually

javascript

svelte