.net-core - Blazor StateHasChanged 不会将组件重置为其初始状态
问题描述
我正在使用 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>
}
我的主要目标是在单击按钮时重置DataRowInput
为初始状态。update
我使用输入字段进行测试,它也不会重置(我输入的输入即使在单击update
按钮后仍保留在那里)。我是 Blazor 的新手,我能找到重新渲染组件的唯一方法是通过StateHasChanged
. 但这并不是将值重置为其初始状态。更新方法如下
public void UpdateRow()
{
StateHasChanged();
}
StateHasChanged() 可以做到这一点还是有其他方法?
解决方案
除非我遗漏了某些东西,否则您的 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 来更新列表中的元素。
编辑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);
}
}
推荐阅读
- node.js - 使用电子伪造“EPERM 操作不允许 RMDIR”打包应用程序时出现问题
- wpf - 在 wpf 中,装饰器可以捕获路由命令吗?
- python - 错误:退出状态为 1 - 是什么原因导致的?
- python - Python将字节转换为十六进制并返回
- profiling - 我如何收集有关网站/网页内容的数据
- html - 有没有办法在打印网站时中断半页?
- django - 在Django中使用模型FileField上传文件时如何获取实例
- java - 为什么我的循环在没有条件时只打印负数?
- c++ - 将字符数组转换为字符串时的意外行为
- zoom-sdk - 我无法使用 Zoom API 更新用户设置“当云录制可用时”选项,并且没有发回错误消息