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

Question

我有两个元素，一个 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的方案？

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>

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

Is there a blazor way of simulating a click event on an html element?

blazor

blazor-webassembly