blazor - Blazor InputFile 重置/清除值 - statehaschanged() 不起作用

问题描述

我有一个使用 Blazor InputFile 组件作为子组件的组件。

当我选择一个文件时，按预期调用 OnChange 处理程序。但是，如果我两次选择同一个文件，则不会再次调用 OnChange 处理程序（我猜这是预期的，因为选择没有改变，但是我的用例需要这个）。

所以，我想如果我可以选择一个文件并调用 OnChange 处理程序并在 OnChange 处理程序中“重置”选定的文件，那么即使再次选择同一个文件，我也应该对处理程序进行新的调用。

我不知道如何重置 InputFile（子）组件中的文件选择。调用this.StateHasChanged()处理程序不会导致 InputFile 组件重新呈现。

如果没有 JSInterop 并手动将 DOM 输入元素的值字段设置为“”，这是否可行（甚至可以工作）？

我的组件：

@using stuff;

<div class="drag-drop-area">
    Drag and drop file here
    <InputFile OnChange="@OnInputFileChange"></InputFile>
</div>

@code {

    [Parameter]
    public String SomeParam { get; set; } = "";

    private async Task OnInputFileChange(InputFileChangeEventArgs e) {
        // do stuff with file

        // do _something_ here to reset InputFile

        this.StateHasChanged(); //<-- this doesn't cause InputFile re-render
    }

到目前为止，我的尝试包括：

遵循与此相关的各种提示/技巧。StateHasChanged()，即
- await Task.Delay(1);
- await InvokeAsync(StateHasChanged);
使用向 InputFile 添加值以AdditionalAttributes.Add(..)查看是否可以强制重新渲染
查看了使用 RenderFragment 动态添加 InputFile 组件，但是在代码中创建 InputFile 的新实例时我无法传递 OnChanged 参数（处理程序），这意味着我不会使用 InputFileChangeEventArgs 进行回调
看着将 InputFile 包装在 EditForm 中以重置表单（Blazor EditForms 显然没有重置功能？）
[编辑] 将 Task 和 void 用于 OnInputFileChange

标签： blazorsubcomponent

仍然不是一个很好的解决方案 - 但更简洁一些并且它有效：

将 InputFile 包裹在一个布尔值中以暂时隐藏/显示。这将清除该值。

  @if (!bClearInputFile)
   {
       <InputFile class="form-control-file" OnChange="@OnInputFileChange" />
   }

   @code
   {
        //Call ClearInputFile whenever value must be cleared.
        private void ClearInputFile()
        {
            bClearInputFile = true;
            StateHasChanged();
            bClearInputFile = false;
            StateHasChanged();
        }
   }

blazor - Blazor InputFile 重置/清除值 - statehaschanged() 不起作用

问题描述

解决方案

推荐阅读