.Net Core Blazor - 使用输入复选框绑定的 Javascript 错误<tr>

Question

我正在为 Blazor 服务器端应用编写一个 Blazor 组件，该组件将显示一个数据表并允许选择一行或多行。这个想法是，表的第一列中将有一个复选框，其余列中将有一个行数据。通过单击复选框或单击行中的任意位置来选择/取消选择该行。 这是通过将输入复选框绑定到行对象上的布尔值并使用 tr 元素上的 onclick 来完成的。

<tr @onclick="() => item.Toggle()">
<td><input type="checkbox" @bind="item.Selected" /></td>
<td>@item.Number</td>
<td>@item.Text</td>
</tr>

一般来说，它有效。单击该行将选择该行，将布尔值设置为 true，该复选框将被选中。再次单击该行将取消选择该行，将布尔值设置为 false，该复选框将被取消选中。一切都如预期的那样。选中复选框时，它也可以工作，但是取消选中复选框会导致 javascript 运行时错误。显示 blazingor-error-ui 页脚，并显示标准消息"发生意外异常。有关详细信息，请参阅浏览器开发工具。重新加载"。

以下是来自 Chrome 控制台的详细信息

blazor.server.js:1 [2020-02-09T11:25:41.667Z] Information: Normalizing '_blazor' to 'https://localhost:44374/_blazor'.
blazor.server.js:1 [2020-02-09T11:25:41.874Z] Information: WebSocket connected to wss://localhost:44374/_blazor?id=58aEAiJBVZFuzpm9Sn_HdA.
blazor.server.js:15 [2020-02-09T11:25:49.676Z] Error: There was an error applying batch 10.
e.log @ blazor.server.js:15
blazor.server.js:8 Uncaught (in promise) TypeError: Cannot read property 'parentNode' of undefined
at Object.e [as removeLogicalChild] (blazor.server.js:8)
at e.applyEdits (blazor.server.js:8)
at e.updateComponent (blazor.server.js:8)
at Object.t.renderBatch (blazor.server.js:1)
at e.<anonymous> (blazor.server.js:15)
at blazor.server.js:15
at Object.next (blazor.server.js:15)
at blazor.server.js:15
at new Promise (<anonymous>)
at r (blazor.server.js:15)
blazor.server.js:15 [2020-02-09T11:25:49.864Z] Error: System.AggregateException: One or more errors occurred. (TypeError: Cannot read property 'parentNode' of undefined)
---> System.InvalidOperationException: TypeError: Cannot read property 'parentNode' of undefined
at Microsoft.AspNetCore.Components.RenderTree.Renderer.InvokeRenderCompletedCallsAfterUpdateDisplayTask(Task updateDisplayTask, Int32[] updatedComponents)
--- End of inner exception stack trace ---

我的应用中的 Blazor 组件使用类Selectable该类将Row类作为参数，并添加布尔值以供选择。但是，为了简化示例，我在Row类中包含布尔Selected。该示例基于标准 Blazor 服务器端模板项目，并添加一个 Blazor 页面。以下是该页面的完整代码：

@page "/test"
@if (data == null)
{
<p><em>Loading...</em></p>
}
else
{
<table class="table table-hover">
<thead>
<tr>
<th>Select</th>
<th>Number</th>
<th>Text</th>
</tr>
</thead>
<tbody>
@foreach (var item in data)
{
<tr @onclick="() => item.Toggle()">
<td><input type="checkbox" @bind="item.Selected" /></td>
<td>@item.Number</td>
<td>@item.Text</td>
</tr>
}
</tbody>
</table>
}
@code 
{
private List<Row> data;
private class Row
{
public bool Selected;
public int Number;
public string Text;
public Row(int number)
{
Selected = false;
Number = number;
Text = $"Item {number}";
}
public void Toggle() => Selected = !Selected;
}
protected override void OnInitialized()
{
data = new List<Row>
{
new Row(1),
new Row(2),
new Row(3)
};
}
}

如果我删除tr元素的onclick，它可以正常工作。由于每当单击行时都会触发onclick，因此我猜复选框上的绑定存在一些冲突。但是，我没有足够的Javascript技能来进一步调查。我可以通过为每个td元素(第一个复选框除外(而不是整个tr触发onclick来避免这种情况，但是当有很多列时，这会变得乏味且有点丑陋。由于这在 blazor 中失败.js我想知道这是否可能是 Blazor 的错误/限制。

欢迎任何想法。谢谢。

Answer 1

尝试以下代码...注意：我做了一些更改，不是因为它们是问题的原因等，我只是忍不住有自己的风格。但是，您应该关注如何绑定到元素。请注意，绑定到复选框的 checked 属性就足够了，如下所示：checked="@row.Selected"。 我希望您正在寻找这样的解决方案...

<table class="table table-hover">
<thead>
<tr>
<th>Select</th>
<th>Number</th>
<th>Text</th>
</tr>
</thead>
<tbody>
@foreach (var row in rows)
{
<tr @onclick="@(() => row.Selected = !row.Selected)">
<td><input type="checkbox" checked="@row.Selected" /></td>
<td>@row.Number</td>
<td>@row.Text</td>
</tr>
}
</tbody>
</table>
@code
{
List<Row> rows = Enumerable.Range(1, 10).Select(i => new Row { Selected = 
false, Number = i, Text = $"Item {i}" }).ToList();
private class Row
{
public bool Selected { get; set; }
public int Number { get; set; }
public string Text { get; set; }
}

}

我

以为我必须使用@bind但我仍然不确定为什么我不能

通常，可以使用 @bind 指令在 Html 元素和数据源之间创建双向数据绑定。但在这种情况下，从数据源到复选框的单向数据绑定就足够了，因为由 tr 元素上的单击操作触发的 lambda 表达式会切换布尔行。选定的属性。因此，将重新渲染组件，并选中或取消选中该复选框。取决于以前的状态。

注意：如果将 @bind 指令应用于复选框，则编译器处理时会创建两个属性，这两个属性应等效于以下内容：

<td><input type="checkbox" checked="@row.Selected" @onchange="@((args) => row.Selected = (bool) args.Value)" /></td>

如果您使用此代码而不是上面的代码，您的应用程序仍然可以正常工作，但正如您现在必须了解的那样，为复选框引发的更改事件是多余的。

但是，你瞧，如果你使用 @bind 指令，让编译器代表你行事，你的代码就会失败。我想这是未报告的错误。

我确实希望我没有通过添加上述添加使事情变得相当复杂......

希望这有帮助...