在 Sveltekit 中点击不同的组件后更改另一个组件的 prop

Question

问题 - 我使用 tailwind 在 Sveltekit 中创建了一个卡片组件，然后我在仪表板页面上显示了卡片组件的四个迭代。我想单击卡片组件并更改背景颜色并将其设置为 active。我可以在点击其中一张卡片时将状态设置为活动状态并更改背景颜色，但是当我点击另一张卡片时无法切换之前选择的活动卡片的活动状态。

我的实现的另一个问题是，如果用户单击活动的卡片，它会将活动的卡片切换为不活动，我也想阻止这种情况。

我的卡片组件是

<script>
    export let mainData;
    export let subData;
    export let symbol;
    export let active = false;

    const setActive = () => {
         active = !active
    }

</script>

<div class="p-6 rounded-md border-blue-grey-200 drop-shadow-md cursor-pointer group" on:click={setActive} class:bg-white={!active} class:bg-cyan-700={active} class:hover:bg-cyan-400={!active} class:hover:bg-cyan-700={active} class:hover:drop-shadow-2xl={!active} >
    <p class="mb-1 font-normal group-hover:text-white" class:text-blue-grey-800={!active} class:text-white={active}>{subData}</p>
    <h5 class="mb-2 text-2xl font-bold tracking-tight text-blue-grey-800 group-hover:text-white" class:text-blue-grey-800={!active} class:text-white={active}>{mainData} <span class="mb-3 text-xl font-normal tracking-tight text-blue-grey-800 group-hover:text-white" class:text-blue-grey-800={!active} class:text-white={active}>{symbol}</span></h5>
</div>

然后我将 Card 组件添加到仪表板，如下所示：

<div class="flex flex-row mt-6 space-x-6" >
        <div class="basis-1/4">
            <Card  mainData = {uk_cost} subData = 'UK' symbol = '£' active=true/>
        </div>
        <div class="basis-1/4">
            <Card  mainData = {us_cost} subData = 'US' symbol = '$'/>
        </div>
        <div class="basis-1/4">
            <Card  mainData = {euro_cost} subData = 'Europe' symbol = '€'/>
        </div>
        <div class="basis-1/4">
            <Card  mainData = {japan_cost} subData = 'Japan' symbol = '¥'/>
        </div>    
    </div>

有没有办法实现我想要做的事情？

谢谢

Answer 1

这是一种使用一些 hard-coding 来实现它的方法，但有一些名义上的变化，如果这是您的要求，您可以使其动态化。（这不是“单选按钮”方法，尽管这可能是替代解决方案。）

注意：我不是 Svelte 专家。我还为 REPL 添加了一些虚拟值。

回复：https://svelte.dev/repl/3bda79e24c124204a1b839ad3124ad29?version=3.46.5

<script>
    import Card from "./Card.svelte";
    let current;
</script>

<div class="flex flex-row mt-6 space-x-6">

    <div class="basis-1/4">
        <button on:click="{() => current = 'UK'}">
            <Card mainData='1' subData='UK' symbol='£' 
                      active="{current === 'UK'}"/>
        </button>
    </div>
    <div class="basis-1/4">
        <button on:click="{() => current = 'US'}">
            <Card mainData='333' subData='US' symbol='$'
                      active="{current === 'US'}"/>
        </button>
    </div>
    <div class="basis-1/4">
        <button on:click="{() => current = 'Europe'}">
            <Card mainData='22' subData='Europe' symbol='€'
                      active="{current === 'Europe'}"/>
        </button>
    </div>
    <div class="basis-1/4">
        <button on:click="{() => current = 'Japan'}">
            <Card mainData='523' subData='Japan' symbol='¥'
                      active="{current === 'Japan'}"/>
        </button>
    </div>
</div>

Card.svelte简单一点：

<script>
    export let mainData;
    export let subData;
    export let symbol;
    export let active = false;
</script>

<div class="p-6 rounded-md border-blue-grey-200 drop-shadow-md cursor-pointer group"
     class:bg-white={!active} class:bg-cyan-700={active} class:hover:bg-cyan-400={!active}
     class:hover:bg-cyan-700={active} class:hover:drop-shadow-2xl={!active}>
    <p class="mb-1 font-normal group-hover:text-white" class:text-blue-grey-800={!active}
       class:text-white={active}>{subData}</p>
      <p>Toggled ACTIVE? {active}</p>
    <h5 class="mb-2 text-2xl font-bold tracking-tight text-blue-grey-800 group-hover:text-white"
        class:text-blue-grey-800={!active} class:text-white={active}>{mainData} <span
            class="mb-3 text-xl font-normal tracking-tight text-blue-grey-800 group-hover:text-white"
            class:text-blue-grey-800={!active} class:text-white={active}>{symbol}</span></h5>
</div>

在 Sveltekit 中点击不同的组件后更改另一个组件的 prop

Change the prop of another component after clicking on a different component in Sveltekit

tailwind-css

sveltekit