一个组件中的 Blazor 单选按钮从其他组件中取消选择单选按钮

Question

我在我创建的每个组件中都有一个单选按钮列表，这些组件可以读取和写入数据库，这很好，但是当我 select 一个组件中的单选按钮时，它将取消选择第一个单选按钮 /其他组件。 我怎样才能做到这一点，以便我可以 select 所有组件中的单选按钮。

单选按钮：

            <label class="GroupTitle">Filters:</label><br/>
            <input type="radio" name="number" id="all" checked="@checkedRadio("all", FileFilter)" @oninput="@(() => UpdateFilter("all"))" /> 
            <label for="">Clear all files</label><br />  
            <input type="radio" name="number" id="number" checked="@checkedRadio("number", FileFilter)" @oninput="@(() => UpdateFilter("number"))" />
            <label for="">Based on number of files</label><br />    
            <input type="radio" name="number" id="date"  checked="@checkedRadio("date", FileFilter)" @oninput="@(() => UpdateFilter("date"))" />    
            <label for="date">Based on date of files</label><br />    

检查无线电（）：

    private bool checkedRadio(string state, FileFilter Filter)
    {
        if(state == Filter.Filter)
        {
            return true;

        }
        else
        {
            return false;
        }
    }

更新过滤器（）：

    private void UpdateFilter(string option)
    {
        filter = option;
        FileFilter.Filter = option;
    }

Answer 1

您的所有单选按钮都共享相同的名称属性。

name="number"

所以它的行为就像一个广播组应该表现的那样； 具有相同名称的单选按钮形成一组互斥值（这是 HTML 本身，而不是 Blazor 事物。）如果您的预期行为是可以选择多个选项，请查看复选框并为每个选项指定不同的名称。

HTML 单选按钮： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio

HTML 复选框： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/checkbox