抑制 blazor 输入事件触发

问题描述

有没有办法完全停止 EditForm 组件上的所有事件？

例如，我有一个按钮，它会触发 onclick 事件，但我不希望整个表单运行。我只想触发按钮事件，别无其他。

目前，当我在文本框中键入时，即使我没有单击按钮。然后单击我页面上的任意位置。表单重新运行，在里面执行我的代码。

我尝试在我的按钮上使用 @onclick:stopPropagation="true"，还创建了一个 div 并将 onclick 放在那里，但它仍然运行我的代码。

我已将代码重置为之前的状态

 @if (item.Option1 != null)
    {
        <li>
            <label for="txtEmail" col="col-sm-2 col-form-label">&nbsp;&nbsp; Current Answer = @item.Option1 </label>
            <div class="form-group row">

                <div class="col-lg-10">
                    <div class="wrap">
                        <InputText id="option1" Placeholder="Edit Option 1" class="form-control" @bind-Value="@CreateQuizModel.Option1"></InputText>
                        @if (item.Option1.Contains("Empty"))
                        {
                            <button type="submit" @onclick="@(e => EditAnswer(item.Option1,CreateQuizModel.Option1,item.Id))" class="btn btn-success">Add New Answer</button>
                        }
                        else
                        {
                            <button @onclick="@(e => DeleteAnswer(item.QuizTitle,null,item.Option2,item.Option3,item.Option4,item.Option5,item.Position))" class="btn btn-danger">Delete Answer</button>
                        }

                        &nbsp; <button @onclick="@(e => EditAnswer(item.Option1,item.Id))" class="btn btn-info">Edit Answer</button>
                    </div>
                </div>

            </div>
        </li>
    }

例如，如果我单击最后一个按钮，我只希望触发 onclick 事件。

问题是因为它在 if 块中吗？如果是这样，我认为这无关紧要，因为页面已经呈现，向我显示按钮。问题是，当我在输入字段中输入时，它总是在我点击退出后触发代码。

解决方法

尝试在您的按钮上设置 type="button" - 它应该禁止表单提交和验证。

重新渲染是另一回事 - 当诸如 EventCallback 之类的 onclick 触发时，blazor 会重新渲染触发事件的组件、其父组件及其兄弟组件。在你的情况下，这就是表格。虽然您可以覆盖 ShouldRender 生命周期方法，但这样做可能有点麻烦。所以，在某种程度上，问题是“表单重新渲染有什么问题，因为它应该这样做”。