添加某种方法来指定不确定的Checkbox中的Checkbox

Question

添加某种方法来指定不确定的Checkboxes。

我尝试了以下代码，但它不起作用。

<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);
    }
}

Interop C＃代码

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

Interop JavaScript代码

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

Answer 2

杰伊的答案让我开始，但对我没有完全有用，这确实是：

不确定性

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

不确定

public partial class IndeterminateCheckbox
{
    private ElementReference _inputElement;
    private bool _indeterminate;
    private protected bool Checked { get; private set; }
    private CheckState CheckState { get; set; }
    [Inject]
    private JavaScriptHelper JavaScript { get; set; } = null!;
    [Parameter]
    public CheckState StartCheckState { get; set; }
    [Parameter]
    public EventCallback<CheckState> CheckedChanged { get; set; }
    protected override async Task OnInitializedAsync()
    {
        if (StartCheckState is CheckState.Indeterminate)
        {
            _indeterminate = true;
            Checked = false;
            CheckState = CheckState.Indeterminate;
        }
        else if (StartCheckState is CheckState.Checked)
        {
            Checked = true;
            CheckState = CheckState.Checked;
        }
        else
        {
            CheckState = CheckState.Unchecked;
        }
        await CheckedChanged.InvokeAsync(CheckState);
    }
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await JavaScript.SetElementProperty(_inputElement, "indeterminate", CheckState is CheckState.Indeterminate);
        await base.OnAfterRenderAsync(firstRender);
    }
    private async Task OnChange(ChangeEventArgs e)
    {
        var indeterminate = !Checked && !_indeterminate;
        var isChecked = !Checked && _indeterminate;
        _indeterminate = indeterminate;
        Checked = isChecked;
        CheckState = indeterminate switch
        {
            false when !isChecked => CheckState.Unchecked,
            false when isChecked => CheckState.Checked,
            _ => CheckState.Indeterminate
        };
        await CheckedChanged.InvokeAsync(CheckState);
    }
}
public enum CheckState
{
    Indeterminate,
    Checked,
    Unchecked
}

Interop C＃代码：

public class JavaScriptHelper
{
    private readonly IJSRuntime _jsRuntime;
    public JavaScriptHelper(IJSRuntime jsRuntime)
    {
        _jsRuntime = jsRuntime;
    }
    public async Task SetElementProperty(ElementReference element, string property, object value)
    {
        await _jsRuntime.InvokeVoidAsync("Functions.setPropByElement", element, property, value);
    }
}

和JavaScript代码：

var Functions = {
    "setPropByElement": function (element, property, value) {
        element[property] = value;
    }
};

并像这样使用：

<IndeterminateCheckbox StartCheckState="CheckState.Unchecked" CheckedChanged="OnEnabledFilterChange" />

如果您忽略了参数，则将选择CheckState的第一个(即Indeterminate(

我敢肯定要进行一些改进，所以请告诉我是否。