Blazor：删除无线电输入“已检查”属性答案

【问题标题】：Blazor: removing radio input 'checked' attributeBlazor：删除无线电输入“已检查”属性
【发布时间】：2020-06-20 18:08:48
【问题描述】：

基于this guide，当我们要使用HTML属性时，例如readonly和disabled不需要值，我们应该给属性分配一个布尔值，剃须刀会根据布尔值渲染属性value（如果 boolean 为 false 则不输出属性，反之亦然）。

现在假设我们有一组无线电输入，我们希望按钮 Clear 清除选定的无线电输入，以便没有任何无线电输入被选中（基本上是初始状态）。

@page "/"

<button @onclick="@(() => isChecked = false)">Clear</button>

<div class="form-check">
    <input class="form-check-input" type="radio" name="option" id="1" value="1"
           checked="@isChecked">
    <label class="form-check-label question-option" for="1">
        option A
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="option" id="2" value="2"
           checked="@isChecked">
    <label class="form-check-label question-option" for="2">
        option B
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="option" id="3" value="3"
           checked="@isChecked">
    <label class="form-check-label question-option" for="3">
        option C
    </label>
</div>


@code {
    private bool isChecked = false;
}

Clear 按钮不起作用，因为isChecked 变量是用false 值初始化的，因此checked 及其关联（isChecked）永远不会被放入输入；但是我们如何才能从输入中删除checked 属性呢？

【问题讨论】：

标签： blazor

【解决方案1】：

这行得通

@page "/"

<div>
    Selected: @selectedValue
</div>
<button @onclick="@(() => selectedValue = "")">Clear</button>

<div class="form-check">
    <input class="form-check-input" type="radio" name="option" id="1" value="1"
                 checked=@(selectedValue == "1") @onclick=@(() => selectedValue = "1")>
    <label class="form-check-label question-option" for="1">
        option A
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="option" id="2" value="2"
                 checked=@(selectedValue == "2") @onclick=@(() => selectedValue = "2")>
    <label class="form-check-label question-option" for="2">
        option B
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="option" id="3" value="3"
                 checked=@(selectedValue == "3") @onclick=@(() => selectedValue = "3")>
    <label class="form-check-label question-option" for="3">
        option C
    </label>
</div>


@code {
    private string selectedValue;
}

【讨论】：