Blazor StateHasChanged 不会将组件重置为其初始状态答案

【问题标题】：Blazor StateHasChanged doesnt reset the component to its initial stateBlazor StateHasChanged 不会将组件重置为其初始状态
【发布时间】：2021-04-21 17:33:33
【问题描述】：

我正在使用 Blazor 服务器页面。我需要重置为我的组件onClick 的初始状态。我正在使用StateHasChanged()，它在单击update 按钮时被调用，但不会将input 字段重置为初始值。我的组件如下所示。

@using DataAcessLibrary;
@using TableMaintenance.Models
@using TableMaintenance.Data;

@if (dr != null)
{
    int count = 0;
<tr>

    <td style="padding:0px"><button type="button" class="btn btn-link btn-sm" style="padding:0px" @onclick="@DeleteRow"><img src="/images/x-square.svg" /></button></td>
    @foreach (var item in dr.ItemArray.Where((a, b) => ColDisplayIndex.Contains(b)))
    {
        string id = ColumnsList[ColDisplayIndex[count++]].ToString();
      
        <td style="padding:0px;">
            <DataRowInput Id="@id" Input=@(item.ToString()) OnChangeDropDown="@AddDropDownValue" OnChangeInput="@AddInputValue" />
        </td>
        <td>
            <input type="text" />
        </td>
    }
<td  style="padding:0px">
    <button style="padding:3px;margin:0px" type="button" class="btn btn-light btn-sm" @onclick="@UpdateRow">update</button>
</td>
</tr>
}

我的主要目标是在单击update 按钮时将DataRowInput 重置为其初始状态。我使用输入字段进行测试，它也不会重置（我输入的输入即使在单击update 按钮后仍保留在那里）。我是 Blazor 的新手，我能找到重新渲染组件的唯一方法是通过 StateHasChanged。但这并不是将值重置为其初始状态。下面给出更新方法

public void UpdateRow()
{
StateHasChanged();
}

StateHasChanged() 可以做到这一点还是有其他方法？

【问题讨论】：

如果我的回答回答了您的问题，您能否将其标记为正确答案？

标签： .net-core razor blazor

【解决方案1】：

除非我遗漏了什么，否则您的 Update() 函数除了调用 StateHasChanged() 之外什么也不做。

我认为您可能误解了 Blazor 中“重新渲染”的工作原理。它不会尝试从原始状态重新渲染组件。这是一个让 Blazor 知道某些东西应该在视觉上发生变化的功能。

在大多数情况下，这应该会自动发生，而无需您专门调用 StateHasChanged()。

要执行您想要执行的操作，您可以将输入绑定到一个字符串，然后让更新函数将其重置为默认值。它看起来像这样：
（请注意，我没有仔细检查语法。这是一个示例。）

<input @bind="myString" />
<button @onclick="resetMyString">Reset</button>
@code{
    private string myString {get; set;}
    private void resetMyString(){
        myString = "";
    }
}

编辑：
我现在确实看到您正在尝试在对象列表上执行此操作。这有点不同，尤其是取决于您使用的数据。

如果您正在使用原语列表，请查看此堆栈溢出答案。他比我更好地将“绑定”总结为对象列表。 https://stackoverflow.com/a/61485002/11991272

如果您使用的是非原始列表，我认为您可以绑定到各个属性，而无需使用 @onchange 来更新列表中的元素。

EDIT 2（使用上述答案的工作实现）：

    <button @onclick="addToList">Add To List</button>
    <br />
    @for (int i = 0; i < myList.Count; i++)
    {
        var index = i;
        <div>
            <input type="text" value="@myList[index]" @onchange="(e => myList[index] = e.Value.ToString())" />
            <button @onclick="() => resetRow(index)">Reset</button>
        </div>
    }
    <br />
    <button @onclick="removeLastItem">Remove Last Item</button>

@code {
    private List<string> myList = new() { "one", "two", "three", "four", "five" };
    private void resetRow(int i)
    {
        myList[i] = "";
    }
    private void addToList()
    {
        myList.Add("");
    }
    private void removeLastItem()
    {
        if (myList.Count > 0)
            myList.RemoveAt(myList.Count - 1);
    }
}

【讨论】：