为blazor创建一个三态复选框组件

本文介绍了为blazor创建一个三态复选框组件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ < 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 resultThe checkbox is always either checked or unchecked, never indeterminate.Any ideas? 解决方案 Using JS interopCreate 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 indeterminateawait JSRuntime.InvokeVoidAsync("auxiliarDOM.setValue", checkRef, "indeterminate", true);//this make the check no indeterminateawait JSRuntime.InvokeVoidAsync("auxiliarDOM.setValue", checkRef, "indeterminate", false); 这篇关于为blazor创建一个三态复选框组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！