在 Blazor Server 中创建自定义组件

Question

我想创建一个组件，使用户能够从原告列表中**自动完成**，此外还允许他们**创建**新原告（如果**找不到结果**）。我知道 UI 库中已经存在自动完成组件，但我想编写自己的自定义组件。

@page "/plaintiff-autocomplete"
@using System.Collections.Generic

<div class="autocomplete">
    <input type="text" @bind-value="plaintiffInput" @bind-value:event="oninput" placeholder="Type plaintiff name..." />
    <div class="autocomplete-items">
        @if (suggestions.Count > 0)
        {
            @foreach (var suggestion in suggestions)
            {
                <div @onclick="(() => SelectSuggestion(suggestion))">@suggestion</div>
            }
        }
        else
        {
            <div @onclick="ShowModal">No Results</div>
        }
    </div>
</div>

@if (showModal)
{
    <div class="modal">
        <div class="modal-content">
            <span class="close" @onclick="CloseModal">&times;</span>
            <h2>Add Plaintiff</h2>
            <form @onsubmit="AddPlaintiff">
                <label for="plaintiffName">Plaintiff Name:</label>
                <input type="text" id="plaintiffName" @bind-value="newPlaintiff" required />
                <button type="submit">Add</button>
            </form>
        </div>
    </div>
}

@code {
    private string plaintiffInput = "";
    private List<string> plaintiffs = new List<string> { "John Doe", "Jane Smith", "David Johnson", "Emily Brown" };
    private List<string> suggestions = new List<string>();
    private bool showModal = false;
    private string newPlaintiff = "";

    private void SelectSuggestion(string suggestion)
    {
        plaintiffInput = suggestion;
        suggestions.Clear();
    }

    private void ShowModal()
    {
        showModal = true;
    }

    private void CloseModal()
    {
        showModal = false;
    }

    private void AddPlaintiff()
    {
        if (!string.IsNullOrWhiteSpace(newPlaintiff))
        {
            plaintiffs.Add(newPlaintiff);
            plaintiffInput = newPlaintiff;
            showModal = false;
            newPlaintiff = "";
        }
    }

    private void UpdateSuggestions()
    {
        suggestions = plaintiffs.Where(p => p.ToLower().Contains(plaintiffInput.ToLower())).ToList();
    }
}

我尝试创建自己的组件，所有代码都在 .razor 文件中。我不确定为什么我的绑定不起作用。当我输入内容时，应用程序不会加载任何结果，它只是说“没有结果”。我以前有自动完成/过滤正在工作的代码，但我对其进行了一些修改，然后它就停止了。

此外，单击“无结果”不会执行任何操作。我以为我正确连接了功能，但我想不是

Answer 1

@page "/plaintiff-autocomplete"
@using System.Collections.Generic

<div class="autocomplete">
    <input type="text" @bind-value="plaintiffInput" @bind-value:event="oninput" @oninput="UpdateSuggestions" placeholder="Type plaintiff name..." />
    <div class="autocomplete-items">
        @if (suggestions.Count > 0)
        {
            @foreach (var suggestion in suggestions)
            {
                <div @onclick="(() => SelectSuggestion(suggestion))">@suggestion</div>
            }
        }
        else
        {
            <div @onclick="@ShowModal">No Results</div> <!-- Use @ShowModal here -->
        }
    </div>
</div>

@if (showModal)
{
    <div class="modal">
        <div class="modal-content">
            <span class="close" @onclick="CloseModal">&times;</span>
            <h2>Add Plaintiff</h2>
            <form @onsubmit="AddPlaintiff">
                <label for="plaintiffName">Plaintiff Name:</label>
                <input type="text" id="plaintiffName" @bind="newPlaintiff" required /> <!-- Use @bind here -->
                <button type="submit">Add</button>
            </form>
        </div>
    </div>
}

@code {
    private string plaintiffInput = "";
    private List<string> plaintiffs = new List<string> { "John Doe", "Jane Smith", "David Johnson", "Emily Brown" };
    private List<string> suggestions = new List<string>();
    private bool showModal = false;
    private string newPlaintiff = "";

    private void SelectSuggestion(string suggestion)
    {
        plaintiffInput = suggestion;
        suggestions.Clear();
    }

    private void ShowModal()
    {
        showModal = true;
    }

    private void CloseModal()
    {
        showModal = false;
    }

    private void AddPlaintiff()
    {
        if (!string.IsNullOrWhiteSpace(newPlaintiff))
        {
            plaintiffs.Add(newPlaintiff);
            plaintiffInput = newPlaintiff;
            showModal = false;
            newPlaintiff = "";
        }
    }

    private void UpdateSuggestions()
    {
        suggestions = plaintiffs.Where(p => p.ToLower().Contains(plaintiffInput.ToLower())).ToList();
    }
}

绑定问题：由于缺少对 UpdateSuggestions() 方法的调用，绑定可能无法正常工作。该方法负责根据用户输入更新建议。目前，它没有在您的组件中的任何地方被调用。

事件处理：没有正确设置用于在没有结果时显示模式的事件处理程序。 ShowModal() 方法不应直接用作事件处理程序。相反，您应该使用匿名函数来调用它。