当选择的下拉列表值更改时，Blazor 触发 onchange 事件

Question

我有以下有效的 html，但是当我渲染下拉时Chosen它停止工作。因为选择的内容不会更新实际的下拉值，所以它会创建自己的元素来保存所选的值。但我无法访问它，那么如何触发 onchange 事件呢？

<select id="search" single class="chosen-select" @onchange="UpdateValue" bind="@searchValue">
        ...
</select>
...In @Code
void UpdateValue(ChangeEventArgs e)
{
    searchValue = e.Value.ToString();
    ... 
}

现在，如果我用选择初始化下拉菜单，那么我无法检测到更改，但可以其他方式。我正在使用 Blazor GL - 服务器端和 .net core 3.0.1

Answer 1

我也有同样的问题。我的临时修复是使用IJSRuntime手动绑定由第三个 js 库呈现的类型组件的值（示例：select2 库）。- 组件.razor：

<select id="Name" class="form-control select2">
    <option @key="key">...</option>
</select>

• 表单.js：

  window.forms = {
  
  init: function () {
      $('.select2').select2();
  },
  selecte2BindOnChange2: function (id, dotnetHelper, nameFunc, namePro) {
  $('#' + id).on('select2:select', function (e) {
      dotnetHelper.invokeMethodAsync(nameFunc, namePro, $('#' + id).val());
  });
  

  } }

• 类函数：

      public async Task InitFormAsync()
      {
          await _jSRuntime.InvokeVoidAsync("forms.init");
          var properties = this.GetType().GetProperties()
              .Where(c => c.GetCustomAttributes(false)
                  .Any(ca => ca is FieldAttribute && ((FieldAttribute)ca).Type == FieldType.Combobox));
          foreach (var p in properties)
          {
              await _jSRuntime.InvokeVoidAsync("forms.selecte2BindOnChange2", p.Name, DotNetRef, "Change_" + this.GetType().Name, p.Name);
          }
      }
  
      [JSInvokable("Change_Model")]
      public void Change(string nameProperty, string value)
      {
          if (value == "null")
          {
              this.SetValue(nameProperty, null);
          }
          else
          {
              this.SetValue(nameProperty, value);
          }
      }