在按钮状态之间切换并在 Svelte 中执行函数调用

Question

我必须承认我还没有完全掌握 Svelte 的概念。我制作了一个组件，其目的是执行某种 API-请求。每个按钮组件可以有两个或更多按钮：

Screenshot of "Button component"

单击按钮组组件中的按钮时，我想执行以下操作：

将点击的按钮设置为状态 "active" 这样我就可以应用某种 class 到它了。
取消设置状态为 "active" 的其他 button/-s。
执行自定义函数调用

按钮组件

<div class="buttons-wrapper">
    <label>
        {labelTitle}
        {#if helpText}
            <Icon iconType="help" iconSize="small" iconTitle={helpText} />
        {/if}
    </label>
    <div class="buttons">
        {#each options as option, index}
            <button class={index === 0 ? 'selected' : ''} 
                value={option.id}
                name={option.name}
                on:click={setSelected}>
                    {option.name}
            </button>
        {/each}
    </div>
</div>

父组件

<ButtonGroup options={[{ id: 0, name: 'Option 1' }, { id: 1, name: 'Option 2' }]} labelTitle="Button label" />

我的示例在单击时调用 setSelected，我应该从组件本身还是从父组件执行此操作？

我真的迷路了...

Answer 1

您可以将 ButtonGroup 设为 Controlled Component（它通过 props 获取其当前值并通知更改）或设为 Uncontrolled Component （在内部存储自己的状态）。或者，您的组件可以支持两者，例如：

<script>
    import { createEventDispatcher } from 'svelte';

    const dispatch = createEventDispatcher();

    export let labelTitle = 'button label';
    export let options = []
    export let selected = 0

    function setSelected(e){
        const newValue = Number(e.target.value)

        selected = newValue

        dispatch('change', {value: newValue})
    }
</script>

<style>
    button.selected {
        background-color: red;
    }
</style>

<div class="buttons-wrapper">
    <label>
        {labelTitle}
    </label>
    <div class="buttons">
        {#each options as option, index}
            <button class={selected === index ? 'selected' : ''} 
                value={option.id}
                name={option.name}
                on:click={setSelected}>
                    {option.name}
            </button>
        {/each}
    </div>
</div>

https://svelte.dev/repl/12f5112852bd4dceb382578a4cfeed06?version=3.12.1

在按钮状态之间切换并在 Svelte 中执行函数调用

Toggle between button states and perform function call in Svelte

javascript

svelte