2

我有一个 liveview 表单和一个文本输入：

<%= search_input :filter, :search, id: "filter_search_field", class: "input", placeholder: "Search", value: @search_field, "phx-debounce": "300"%>

现在有一段时间我想以编程方式清除此字段，我通过更改分配来做到这一点：

{:noreply, assign(socket, :search_field, "")}

这样做的问题是phx-change分配给表单的事件没有被触发。

我还尝试创建一个 JS 挂钩并从挂钩中更改字段的值，但这也不会创建事件。

4

1 回答 1

2

事实证明，更改值不足以触发更改，change应该在用户输入触发事件时发出事件。更多信息可以在这里找到。

现在处理这个问题的方法很少：

  1. 为输入创建一个钩子并在输入更改时发出更改事件。这样做的缺点是您将在用户输入时获得重复的事件。
  2. 将钩子添加到按钮（在我的情况下，我有一个重置按钮）。从这里您可以手动触发事件。

我最终做的有点不同。Hooks有一个名为的方法pushEvent，所以我用它来触发handle_event：

Hooks.TestHook = {
  updated(){
    this.pushEvent("filter", {_target: ["filter", "search"], filter: {search: ""}});
  }
}

change可以在此处找到创建自定义事件的变体。

于 2020-04-06T08:26:58.827 回答