有没有一种 blazor 方法可以模拟 html 元素上的单击事件？

Question

我有两个元素，一个输入文件和一个按钮。我想在单击按钮时模拟单击 InputFile。我现在可以与 Js 一起使用，但想知道是否有 blazor 的方法可以做到这一点。 一个 gif 示例

这是当前的 blazor 代码

<InputFile id="filePicker" />
<button type="button" @onclick="OpenFilePicker">or Select</button>

private async Task OpenFilePicker() => await JsRuntime.InvokeVoidAsync("clickElement");

通过这个 Js 代码我可以让它工作，

clickElement = () => document.getElementById('filePicker').click();

有没有更好的不依赖Js的解决方案？

Answer 1

我认为不使用 javascript 就不可能从 blazor 触发点击事件。

您可以使用 ref 指令从 blazor 获取对元素的引用，但您仍然需要 javascrit 来触发对该元素的单击。

<InputFile @ref="filePicker"></InputFile>
<button type="button" @onclick="() => click()">Select a file</button>

<script>
    window.triggerClick = (elt) => elt.click();
</script>

@code {
    InputFile filePicker;
    async Task click() {
        await js.InvokeAsync<object>("triggerClick", filePicker.Element);
    }
}

但是由于您试图触发输入上的点击，因此有一种纯 html 方法可以使用标签来完成此操作

<InputFile id="filePicker"></InputFile>

<label for="filePicker">
    <button type="button" style="pointer-events: none;">Select a file</button>
</label>