core - 添加一些方法来指定 blazor 中的不确定复选框

Question

添加一些方法来指定 blazor 中的不确定复选框。

我试过下面不行

<input type="checkbox" indeterminate="@checkValue" onclick="@checkedClick" />

任何人在 blazor 中指定不确定的复选框。

Answer 1

这似乎暂时没有计划。 (参见 https://github.com/dotnet/aspnetcore/issues/10378)

我找到的最小解决方案是...

组件代码

@inject IJSRuntime jsRuntime

<input @ref=inputElement type="checkbox" checked="@Checked" @onchange="OnChange" />

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (Indeterminate.HasValue)
        {
            await jsRuntime.SetElementProperty(inputElement, "indeterminate", Indeterminate.Value);
        }
        await base.OnAfterRenderAsync(firstRender);
    }

    private ElementReference inputElement;

    [Parameter]
    public bool? Indeterminate { get; set; }

    [Parameter]
    public bool Checked { get; set; }

    [Parameter]
    public EventCallback<bool> CheckedChanged { get; set; }

    private async Task OnChange(ChangeEventArgs e)
    {
        Checked = (bool)e.Value;
        await CheckedChanged.InvokeAsync(Checked);
    }
}

互操作 C# 代码

public static async Task SetElementProperty(this IJSRuntime jsRuntime, ElementReference element, string property, object value)
{
    await jsRuntime.InvokeVoidAsync("window.jsinterop.setPropByElement", element, property, value);
}

互操作 Javascript 代码

window.jsinterop = {
    setPropByElement: function (element, property, value) {
        element[property] = value;
    }
}