Blazor中是否有一种模拟HTML元素点击事件的方式？

Question

我有两个元素，一个InputFile和一个按钮。我想在点击按钮时模拟对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();

是否有不依赖 JavaScript 的更好解决方案？

- Zammil

Answer 1

我认为在Blazor中触发单击事件而不使用JavaScript是不可能的。

您可以使用ref指令从Blazor获取对元素的引用，但仍需要JavaScript来触发元素上的单击事件。

<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>

- J.Loscos

---

谢谢你的帮助。这至少帮我去掉了 Js 依赖。 - Zammil