Laravel Livewire - 我应该打扰使用表单吗？答案

【问题标题】：Laravel Livewire - should I bother using forms at all?Laravel Livewire - 我应该打扰使用表单吗？
【发布时间】：2022-01-23 13:35:24
【问题描述】：

我的 Livewire 组件如下所示。很简单：

class StartLw extends Component
{
    public $count;

    public function mount() {
        $this->count = 0;
    }

    public function formSubmit() {
        $this->count++;
    }

    public function relatedToButSeparateFromForm() {
        $this->count++;
    }
}

然后我的 HTML 页面上有一个<form>，Livewire 阻止了默认提交，将其重定向到组件函数。请注意，在表单内部有一个常用的"submit" 按钮和一个辅助按钮（在功能上与表单相关，但在技术上与提交表单是分开的）。

在我看来，这个辅助按钮只是一个 HTML 对象，并且（可能是错误地）因为它没有被声明为 "submit" 类型，我认为它没有理由尝试提交表单，而不是单击应该是一个复选框。

<div class="container">

    <div class="row">
        <div class="col"><p>{{ $count }}</p></div>
    </div>

    <div class="row">
        <div class="col">
            <form method="post" wire:submit.prevent="formSubmit">
                <button type="submit">Submit Min Form</button>&nbsp;
                <button wire:click="relatedToButSeparateFromForm">Lookup something related to form</button>
            </form>
        </div>
    </div>
</div>

当我按下主表单提交按钮时，屏幕上的计数器 => 增加 1
当我按下辅助（查找）按钮时，计数器 => 递增 2

换句话说，辅助按钮既执行在wire:click="" 属性中被告知的功能，也执行表单提交功能。在我的实际应用程序中，这种行为让我非常头疼。

我正在考虑的一个选项是完全取消 <form> 元素，只允许按钮彼此独立工作（每个按钮都执行自己的 wire:click="" 功能）。使用这个选项和一些wire:model 属性，我想我可以完成这项工作。然而，删除<form> 标签感觉就像是在打破 HTML 的哲学，我不禁认为像 Livewire 这样的技术应该与（如已建立的技术）HTML 集成，而不是更改它需要结构化的方式。

想知道其他人是如何解决这个问题的？

【问题讨论】：

标签： laravel-livewire

【解决方案1】：

建议为所有按钮指定type。浏览器将没有type 的button 视为已使用type="submit" 指定（即默认为表单提交）是很常见的。

在您的辅助按钮上定义type="button"，您应该没问题。

【讨论】：

【解决方案2】：

对于以后遇到此问题的任何人，正确的做法是将按钮声明为按钮！请参阅@Peppermintology 的答案。

我发现的另一个可能的解决方案是将prevent 修饰符也添加到第二个按钮：

<button wire:click.prevent="relatedToButSeparateFromForm">Click Me</button>

【讨论】：