当文件选择上传时，livewire 组件会自动渲染答案

【问题标题】：When the file selected for upload, livewire coponent is automaticaly rendering当文件选择上传时，livewire 组件会自动渲染
【发布时间】：2021-03-11 04:53:43
【问题描述】：

是否有可能在每个点击事件上停止 Livewire 渲染？

其实问题是，如果有任何事件从 HTML 或 Javascript 触发，那么渲染函数会自动从 Laravel 中的 Livewire 组件调用。

似乎如果任何第三方工具在 HTML 中初始化，那么它会再次触发渲染功能。

如何避免这种情况？任何帮助

【问题讨论】：

标签： laravel laravel-livewire

【解决方案1】：

在这种情况下，您需要使用Deferred Updating。

在您不需要实时更新数据的情况下，Livewire 有一个 .defer 修饰符，可以根据下一个网络请求批量更新数据。

例如，给定以下组件：

<input type="text" wire:model.defer="query">
<button wire:click="search">Search</button>

当用户在该字段中键入时，不会发送任何网络请求。即使用户点击离开输入字段并点击页面上的其他字段，也不会发送任何请求。

当用户按下“搜索”时，Livewire 将发送一个网络请求，其中包含新的“查询”状态和要执行的“搜索”操作。

这可以在不需要时大大减少网络使用量。

【讨论】：

文本框输入没问题。但是如果你点击“搜索”按钮，livewire 会再次渲染整个页面。所以它不应该发生。
在这种情况下添加type="button" 并删除wirw:click 事件。这样就不会发生默认提交。
实际上我的问题是，如果我们对 Livewire 组件进行任何调用，它还会调用“渲染”函数。例如，Livewire 组件类中有两个函数。一个是“搜索”，另一个是“渲染”。因此，如果我们从 HTML 页面调用“搜索”功能，最终也会触发“渲染”功能。这就是问题所在。
这是预期行为。否则，您可以使用刀片组件laravel.com/docs/8.x/blade#components，而不是 livewire 组件

【解决方案2】：

在按钮内使用防止事件修饰符

<input type="text" name="text_field_name" wire:model.defer="search_txt" />
<button type="button" wire:click.prevent="yourFunction">Seacrh</button>

【讨论】：