在 Reagent 应用中触发 onchange 事件

Question

如何触发 Reagent 应用程序中受控输入的 onchange 事件？

[:input {:on-change (fn [e] ...) :id :my-input}]

Reagent 实现了 React 并且输入组件是 Controlled React 输入，所以我发现输入最终没有 on-change 函数。它有某种包含传递的 on-change 函数的 React 属性，输入元素对象中默认的 on-change fn 为 nil。

所以这不起作用：

(let [input (.get-element-by-id js/document "my-input")]
     (.onchange input))

目的是我有输入字段，我想制作一个可以随时调用的字段值验证器（例如单击提交按钮）。所以我把验证器放在 on-change 函数中，它运行良好，但现在如果我想在单击提交按钮时验证字段，我需要调用 on-change 函数。

我试过了，但什么也没发生：

(defn input
  []
  (letfn [(f [] (let [e (js/Event. "change")
                      el (.getElementById js/document "my-input")]
                     (.dispatchEvent el e)))]
     [:<> [:input  {:id :my-input :on-change (fn [_] (println "Changed"))}]
          [:button {:on-click f} "Trigger on-change"]]))

Answer 1

你试图做的是一个坏主意，因为浏览器对待用户触发的事件与代码触发的事件不同。所以，你可能会发现一些东西对实际的

:on-change

有用，但在其他方面却不行。相反，只需编写一个函数来做你想做的事。

(defn stuff-i-want-to-happen [maybe with args] ...)

(defn input []
  [:<> [:input {:on-change (fn [_] (println "Changed") (stuff-i-want-to-happen 1 2 3)}]
       [:button {:on-click #(stuff-i-want-to-happen 4 5 6)} "Trigger on-change"]])

如果您需要跟踪其他状态，您可以将其移动到适当的位置。

Answer 2

目的是我有输入字段，我想制作一个可以随时调用的字段值验证器（例如单击提交按钮）。

既然你在使用 Reagent，我想你想要的是使用表单验证器钩子。你可以在 npm 周围翻找，但我建议的一个是 react hook form

它确实需要您了解他们“注册”验证的概念，但它将能够满足您所有的验证需求（只有在真正的用户参与时才会增长）。