Blazor：可重用的 OnSelect 更改事件

问题描述

是否有更可重用的版本：

 void OnSelectFoundWithCus(ChangeEventArgs e)
 {
     selectedString = e.Value.ToString();
     displayToggle("FoundWithCus");
 }
 async Task displayToggle(string DivToToggle)
 {
    if(selectedString == "Yes")
    //if (!isChecked)
    {
        await JSRuntime.InvokeAsync<object>("showElement",new { id = DivToToggle });
        isChecked = !isChecked;
    }
    else
    {
        await JSRuntime.InvokeAsync<object>("hideElement",new { id = DivToToggle });
        isChecked = !isChecked;
    }
 }

我想要一个可重用的方法，我可以通过一个字符串来隐藏/显示什么 Div，但它似乎不是 ChangeEventArgs 方法的一个选项。用户希望根据选项选择（全部是/否）在隐藏和可见之间切换几个控件。理想情况下，我宁愿只有一种可以像这样使用的方法：

 void OnSelect(ChangeEventArgs e,string DivToToggle)
 {
     selectedString = e.Value.ToString();
     displayToggle(DivToToggle);
 }

尝试使用更改类的方法，如下所示：

<div class="@className"></div>

然后

void OnSelect(ChangeEventArgs e)
{
    selectedString = e.Value.ToString();
    if (selectedString == "No")
    {
        className = "form-group row";
    }
    else
    {
        className = "Invisible";
    }        
}

当任何引用它的控件选择一个选项时，会显示/隐藏使用 class="@className" 的每个控件。

解决方法

看来我可能问错了问题。基本上，我需要将附加参数传递给带有 ChangeEventArgs 参数的函数。到目前为止，我发现的第一个功能版本是这个设置（直到我可以让非 JavaScript 版本工作）：

对于选择控件：

 <select @onchange='(e  => DisplayToggle(e,"DMGReported"))' class="form-control">
     <option value=" "> </option>
     <option value="Yes">Yes</option>
     <option value="No">No</option>
 </select>

对于 C#：

async Task DisplayToggle(ChangeEventArgs e,string DivToToggle)
{
    selectedString = e.Value.ToString();
    if (selectedString == "Yes")        
    {
        await JSRuntime.InvokeAsync<object>("showElement",new { id = DivToToggle });
        selectedString = "";
    }
    else
    {
        await JSRuntime.InvokeAsync<object>("hideElement",new { id = DivToToggle });
        selectedString = "";
    }
}

对于 IJSRuntime：

function hideElement(styleOp) {
    document.getElementById(styleOp.id).style.display = "none";
}
function showElement(styleOp) {
    document.getElementById(styleOp.id).style = null;
    document.getElementById(styleOp.id).style.visibility = "visible";    
}