触发表单字段更改值的更改

Question

我有一个实时查看表单和一个文本输入：

<%= 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 挂钩并从该挂钩更改字段的值，但是这也不会创建事件。

Answer 1

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

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

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

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

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

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