英文:
Trigger onchange event of input in Reagent app
问题
Sure, here's the translated code portion:
我如何在Reagent应用程序中触发受控输入的onchange事件？
[:input {:on-change (fn [e] ...) :id :my-input}]
Reagent实现了React，输入组件是受控的React输入，因此我发现输入最终没有on-change函数。它具有某种包含传递的on-change函数的React属性，而输入元素对象中的默认on-change fn为nil。
因此，这不起作用：
(let [input (.getElementById 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"]]))
Please note that this translation assumes that the code logic remains the same, and it may be necessary to adapt it to the context of your Reagent application.
英文:
How can I trigger the onchange event of a controlled input in a Reagent application?
[:input {:on-change (fn [e] ...) :id :my-input}]
Reagent implements React and the input components are Controlled React inputs so as I found out the input eventually doesn't have the on-change function. It has some kind of React property that contains the passed on-change function and the default on-change fn is nil in the input element object.
So therefore this doesn't working:
(let [input (.get-element-by-id js/document "my-input")]
(.onchange input))
The purpose is that I have input fields and I want to make a field value validator that could be called anytime (e.g. clicking on a submit button). So I put the validator in the on-change function and it works well but now I need to call the on-change function if I want validate the fields when Im clicking on the submit button.
I tried this but nothing happened:
(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"]]))
答案1
得分: 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"]])
如果需要跟踪额外的状态，只需将其移动到合适的位置。
英文:
What you are trying to do is a bad idea, since the browser treats events triggered by the user differently than those triggered by code. So, you might find stuff work on the actual :on-change but not otherwise. Instead, just write a function to do what you want.
(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"]])
If you need to track additional state, you can just move that to the appropriate place.
答案2
得分: 0
The purpose is that I have input fields and I want to make a field value validator that could be called anytime (e.g. clicking on a submit button).
Since you are using Reagent, I think what you want is to use form validator hooks. You can rummage around npm but one I would suggest is react hook form
It does require you to learn their concept of "registering" a validation but it will be able to keep up with all of your validation needs (which only grow as real users get involved).
英文:
> The purpose is that I have input fields and I want to make a field value validator that could be called anytime (e.g. clicking on a submit button).
Since you are using Reagent, I think what you want is to use form validator hooks. You can rummage around npm but one I would suggest is react hook form
It does require you to learn their concept of "registering" a validation but it will be able to keep up with all of you validation needs (which only grow as real users get involved).
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论