Blazor Select 元素我无法设置 ChangeEvent

Question

当 select 元素绑定到字段时，我看不到如何在该元素上设置更改事件。当我 select 名称选择器列表中的名称时，第二个列表反映了更改。

<div>
    <p>Name Chooser</p>
    <select @onchange="OnChange">
        @foreach (var name in Names)
        {
            <option>@name</option>
        }
    </select>
</div>


<select @bind="@chosenName"> 
    @foreach (var name in Names)
    {
        <option>@name</option>
    }
</select>



@code{
    string chosenName = "Peter";
    List<string> Names = new List<string>() { "Paul", "Peter", "Jane", "Jackie" };

    void OnChange(ChangeEventArgs e)
    {
        chosenName = e.Value.ToString();
    }
    void OnChange2(ChangeEventArgs e)
    {

    }

}

我的问题是当我用鼠标 select 时如何检测列表 2 上的更改事件。此代码引发编译器错误。

<select @bind="@chosenName" @onchange="OnChange2">

Answer 1

您实际上不需要绑定任何内容，因为 onchange 事件会发送下拉列表所需的所有信息。在许多情况下，您甚至不需要事件处理程序。您可以只使用 lambda 方法设置一个变量。

可能是这样的：

<div>
    <p>Name Chooser</p>
    <select @onchange="args => chosenName = args.Value.ToString()">
        @foreach (var name in Names)
        {
            <option selected>@name</option>
        }
    </select>
</div>

<select @onchange="OnChange2">
    @foreach (var name in Names)
    {
        if (name == chosenName)
        {
            <option selected>@name</option>
        }
        else
        {
            <option>@name</option>
        }
    }
</select>

@code{
    string chosenName = "Peter";
    List<string> Names = new List<string>() { "Paul", "Peter", "Jane", "Jackie" };

    void OnChange2(ChangeEventArgs e)
    {
    }
}

Answer 2

这是使用 getter 和 setter 的替代方法。它让 Blazor 处理控制事件。

@page "/select2"
<div>
    <p>Name Chooser</p>
    <select @bind="name">
        @foreach (var name in Names)
        {
            <option>@name</option>
        }
    </select>
</div>


<select @bind="@chosenName">
    @foreach (var name in Names)
    {
        <option>@name</option>
    }
</select>



@code{

    string name
    {
        get => _name;
        set
        {
            if (!value.Equals(_name))
            {
                _name = value;
                // do something or trigger an event;
                _chosenname = value;
            }
        }
    }

    string chosenName
    {
        get => _chosenname;
        set
        {
            if (!value.Equals(_chosenname))
            {
                _chosenname = value;
                // do something or trigger an event;
            }
        }
    }

    string _name = null;
    string _chosenname = "Peter";
    List<string> Names = new List<string>() { "Paul", "Peter", "Jane", "Jackie" };
}

Blazor Select 元素我无法设置 ChangeEvent

Blazor Select Element I Can Not Set The ChangeEvent

html

blazor-webassembly