为blazor创建一个三态复选框组件 [英] Creating a Tri-State checkbox component for blazor

问题描述

< pre class = snippet-code-html lang-html prettyprint-override> < input @ bind = Checked type = checkbox @ onclick = eventArgs => {onclick（）; } indeterminate = @ indeterminate class = checkbox-input>

@code {
[参数]
公共布尔？选择{组; } = null;

公共布尔不确定{组; }

公共布尔值已选中{get;组; }

public void onclick（）
{



selected = selected == null吗？ true：已选择== true？ new bool？（）：false;



已检查=已选择==空||选择==假;
不定=选定==空;

}
}

不会产生预期的结果

该复选框始终处于选中状态或未选中状态，永远不会不确定。

有什么想法吗？

解决方案

使用JS互操作

创建简单脚本

 < script> 
 var auxiliarDOM = auxiliarDOM || {}; 
 auxiliarDOM.setValue =函数（元素，属性，值）{
 element [property] =值； 
} 
< / script> 
  

然后在blazor中可以拥有ElementRef

  @inject IJSRuntime JSRuntime 
< input @ref =" checkRef" type = checkbox /> 
 
私人ElementReference checkRef; 
 
 //这会使检查不确定
等待JSRuntime.InvokeVoidAsync（ auxiliarDOM.setValue，checkRef， indeterminate，true）; 
 //这使检查没有不确定的
等待JSRuntime.InvokeVoidAsync（ auxiliarDOM.setValue，checkRef， indeterminate，false）; 
  

<input @bind="Checked" type="checkbox" @onclick="eventArgs => { onclick(); }" indeterminate="@indeterminate" class="checkbox-input">

@code {
    [Parameter]
    public bool? selected { get; set; } = null;

    public bool indeterminate { get; set; }

    public bool Checked { get; set; }

    public void onclick()
    {



        selected = selected == null ? true : selected == true ? new bool?() : false;



        Checked = selected == null || selected == false;
        indeterminate = selected == null;

    }
}

This doesn't produce the desired result

The checkbox is always either checked or unchecked, never indeterminate.

Any ideas?

解决方案

Using JS interop

Create a simple script

<script>
var auxiliarDOM = auxiliarDOM || {};
auxiliarDOM.setValue = function (element, property,value) {
    element[property] = value;
}
</script>

Then in blazor you can has a ElementRef

@inject IJSRuntime JSRuntime
<input @ref="checkRef" type="checkbox" />

private ElementReference checkRef;

//this make the check indeterminate
await JSRuntime.InvokeVoidAsync("auxiliarDOM.setValue", checkRef, "indeterminate", true);
//this make the check no indeterminate
await JSRuntime.InvokeVoidAsync("auxiliarDOM.setValue", checkRef, "indeterminate", false);

这篇关于为blazor创建一个三态复选框组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！