如何重写组件中的onchange方法？

Question

这是我在其他页面上使用的组件，我想重写下面的 OnValueChange 方法。因此，在我的子页面或组件上，我有一个 OnValueChange 方法..我是否需要设置为虚拟并从新组件继承..最简单的方法是什么？

  <select id="ddlUsers" class="form-control" value="@Value" @onchange="OnValueChanged">
      @if (string.IsNullOrWhiteSpace(Value)) //rule out default value
      {
          <option selected disabled value="@string.Empty">--- Select User ---</option>
      }
      @foreach (var user in UserList!)
      {
          if (user != null)
          {
              <option value="@user.UserId">@user.UserName</option>
          }
      }
  </select>

@code {

    // Get list of users from db.

    private List<User>? UserList { get; set; }

    // Get the value of the selected value; used to pass to the child page or component.

    [Parameter]
    public string? Value { get; set; } = string.Empty;

    // Callback used to get or change value.

    [Parameter]
    public EventCallback<string> ValueChanged { get; set; }

    /// <summary>
    /// Is run when page is loaded.
    /// </summary>
    /// <returns></returns>
    protected override async Task OnInitializedAsync()
    {
        // Put a random delay in, get users

        await Task.Delay(400);

        // Get list of users

        UserList = await Context.Users
        .OrderBy(x => x.UserId)
        .ToListAsync();
    }

    // Store selected value of dropdown on value changed
    
    protected Task OnValueChanged(ChangeEventArgs e)
    {
        Value = e.Value!.ToString();
        return ValueChanged.InvokeAsync(Value);

    }

}

Answer 1

你应该使用虚拟的。

我还冒昧地重构了您的代码，以演示您可以实现的其他一些更改。

1. 我已切换到包含类型处理的

   InputSelect

   ，并通过假设您的

   UserId

   实际上是一个 int 来证明这一点。

2. 我已更改为使用

   IEnumerable

   进行收藏，以防止过度具体化。

3. 我改变了你的一些

   nullable

   处理方式。

这是重构后的组件：

<InputSelect TValue="int" id="ddlUsers" class="form-control" Value="Value" ValueChanged="OnValueChanged">
    @if (Value == 0) //rule out default value
    {
        <option selected disabled value="0">--- Select User ---</option>
    }

    @foreach (var user in UserList)
    {
        <option value="@user.UserId">@user.UserName</option>
    }
</InputSelect>

@code {
    private IEnumerable<User> UserList { get; set; } = Enumerable.Empty<User>();

    [Parameter] public int Value { get; set; }
    [Parameter] public EventCallback<int> ValueChanged { get; set; }

    protected override async Task OnInitializedAsync()
    {
        // Fake an async. If this is a normal call no delay is required
        await Task.Delay(400);

        UserList = UserProvider.Users?.OrderBy(x => x.UserId) ?? Enumerable.Empty<User>();
    }

    protected virtual Task OnValueChanged(int value)
        => ValueChanged.InvokeAsync(value);
}

我的用户代码：

public record User
{
    public int UserId { get; init; }
    public string UserName { get; init; } = "Not Set";
}

public static class UserProvider
{
    public static IEnumerable<User>? Users => _users.AsEnumerable();

    private static List<User> _users = new()
        {
            new User { UserId = 1, UserName ="UK"},
            new User { UserId = 2, UserName ="France"},
            new User { UserId = 3, UserName ="Spain"},
        };
}