是否有一种模拟 html 元素上的单击事件的 blazor 方式？

【问题标题】：Is there a blazor way of simulating a click event on an html element?是否有一种模拟 html 元素上的单击事件的 blazor 方式？
【发布时间】：2021-09-03 09:32:35
【问题描述】：

我有两个元素，一个 InputFile 和一个按钮。我想在单击按钮时模拟对 InputFile 的单击。我现在可以与 Js 一起使用，但想知道是否有一种 blazor 的方式来做到这一点。 An example 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依赖有没有更好的解决方案？

【问题讨论】：

标签： blazor blazor-webassembly

【解决方案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>

【讨论】：

感谢您帮助我。这至少帮助我删除了 Js 依赖项。