我已经创建了一个组件,我想用它来 Select 一名球员.可以有两个不同的玩家,我试图让每个玩家调用不同的函数.

但是,当我在任一组件上 Select 一个选项时,IS总是调用seltP1函数.

App.svelte:

<script lang="ts">
    import SwapIcon from '~icons/tabler/arrows-diff';
    import PlayerSelector from '../components/PlayerSelector.svelte';
    import type { AutocompleteOption } from '@skeletonlabs/skeleton';

    function selectP1(e: CustomEvent<AutocompleteOption>): void {
        console.log('P1 is ' + e.detail.value);
    }

    function selectP2(e: CustomEvent<AutocompleteOption>): void {
        console.log('P2 is ' + e.detail.value);
    }
</script>

<div class="container h-1/5 w-3/4 mx-auto flex justify-between items-center">
    <PlayerSelector on:selection={(e) => selectP1(e)} />
    <button type="button" class="btn-icon variant-filled-primary"><SwapIcon /></button>
    <PlayerSelector on:selection={(e) => selectP2(e)} />
</div>

PlayerSelector.svelte:

<script lang="ts">
    import {
        Autocomplete,
        type AutocompleteOption,
        type PopupSettings
    } from '@skeletonlabs/skeleton';
    import { popup } from '@skeletonlabs/skeleton';

    let popupSettings: PopupSettings = {
        event: 'focus-click',
        target: 'popupAutocomplete',
        placement: 'bottom'
    };

    let player: string = '';

    const players: AutocompleteOption[] = [
        { label: 'John Smith', value: 'JSmith' },
        { label: 'Tom Smith', value: 'TSmith' },
        { label: 'Joe Jones', value: 'JJones' }
    ];
</script>

<div class="card w-3/4 max-w-sm max-h-48 p-4 overflow-y-auto">
    <input
        class="input autocomplete p-1"
        type="search"
        name="autocomplete-search"
        bind:value={player}
        placeholder="Search..."
        use:popup={popupSettings}
    />
    <div data-popup="popupAutocomplete">
        <Autocomplete bind:input={player} options={playerList} on:selection />
    </div>
</div>

不管我更新哪一个PlayerSelector,它总是叫selectP1.我想不出怎么才能让这件事像预期的那样奏效.

我从https://www.skeleton.dev/components/autocomplete开始进行自动完成设置

推荐答案

问题是名称不是唯一的,所以两个弹出窗口都指向相同的元素.

建议导出一个name属性,并将其用于输入和弹出窗口.

export let name: string;
let popupSettings = {
    event: 'focus-click',
    target: name + 'popupAutocomplete',
    placement: 'bottom'
};
<input {name} ...>

<div data-popup="{name}popupAutocomplete">

(更改输入名称可能是可选的,但如果通过表单发送到服务器,则有助于区分这些值.)

Typescript相关问答推荐

类型脚本:类型是通用的,只能索引以供阅读.(2862)"

需要使用相同组件重新加载路由变更数据—React TSX

如何正确地对类型脚本泛型进行限制

使用axios在ngOnInit中初始化列表

在分配给类型的只读变量中维护const的类型

是否将自动导入样式从`~/目录/文件`改为`@/目录/文件`?

布局组件中的Angular 17命名路由出口

声明文件中的类型继承

返回嵌套props 的可变元组

ANGLE订阅要么不更新价值,要么不识别价值变化

从route.参数获取值.订阅提供";无法读取未定义";的属性

有没有可能创建一种类型,强制在TypeScrip中返回`tyPeof`语句?

如何在Angular 服务中制作同步方法?

如何在Angular /字体中访问API响应的子元素?

如何键入';v型';

TS 排除带点符号的键

将对象数组传递给 Typescript 中的导入函数

将 Angular 从 14 升级到 16 后出现环境变量注入问题

如何让 Promise 将它调用的重载函数的类型转发给它自己的调用者?

使用 Next.js 路由重定向到原始 URL 不起作用