抑制触发的 Blazor 输入事件

Posted 2023-03-27

【中文标题】抑制触发的 Blazor 输入事件

【英文标题】：Suppressing blazor input events fired

【发布时间】：2021-05-10 15:27:54

【问题描述】：

有没有办法完全停止 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, CreateQuizModel.Option1, item.Id))" class="btn btn-info">Edit Answer</button>
                    </div>
                </div>

            </div>
        </li>
    

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

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

【参考方案1】：

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

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