Clojurescript 重新帧:调度后重置atom
我有以下表格:Clojurescript 重新帧:调度后重置atom,clojurescript,reagent,re-frame,Clojurescript,Reagent,Re Frame,我有以下表格: (defn input-question [] (let [new-question (reagent/atom "")] (fn [] [:div [:input {:type "text" :value @new-question :on-change #(reset! new-question (-> % .-target .-value))}] [:input {:type
(defn input-question
[]
(let [new-question (reagent/atom "")]
(fn []
[:div
[:input {:type "text"
:value @new-question
:on-change #(reset! new-question (-> % .-target .-value))}]
[:input {:type "button"
:value "Save new question"
:on-click #(re-frame.core/dispatch [:create-question @new-question])} ] ])))
分派后如何将@new question重置为“”(空字符串)?您可以使用
重置调度后ratom上的代码>:
#(do (re-frame.core/dispatch [:create-question @new-question])
(reset! new-question ""))
要在分派值后重置它。您可能需要查看重新帧效果文档:
请注意,您也可以使用dispatch-n
:
您可能希望使用fn
语法而不是#(…)
速记函数语法:
:input {:type "button"
:value "Save new question"
:on-click (fn []
(re-frame.core/dispatch [:create-question @new-question])
(reset! new-question "")) } ]
您还可以同时使用事件和子事件来尽可能多地保留视图代码中的逻辑。这意味着您将以许多事件和子事件结束,然而这是经过设计和惯用的重新框架。这使得重新构建代码更容易理解、解耦,并且更易于测试。以下是一个例子:
(rf/reg-fx
:save-question
(fn [question]))
;; Handle creating a question
(rf/reg-sub
:new-question-value
(fn [db _]
(get-in db [:new-question :value])))
(rf/reg-event-db
:on-new-question-change
(fn [db [_ value]]
(assoc-in db [:new-question :value] value)))
(rf/reg-event-fx
:on-save-question-click
(fn [{:keys [db]} _]
{:db (assoc-in db [:new-question :value] "")
:save-question (get-in db [:new-question :value])}))
(defn input-question
[]
(let [new-question-value (rf/subscribe [:new-question-value])
on-save-question-click #(rf/dispatch [:on-save-question-click])
on-new-question-change #(rf/dispatch [:on-new-question-change (.. % -target -value)])]
(fn []
[:div
[:input {:type "text"
:value @new-question-value
:on-change on-new-question-change}]
[:input {:type "button"
:value "Save new question"
:on-click on-save-question-click}]])))
关于此代码的一些额外说明:
- 您应该为事件和子键命名名称空间,以防止命名冲突
- 您应该定义一个函数并将其传递到
reg fx
,reg event db
,reg event fx
® sub
。通过允许测试代码直接调用函数处理程序,这样做可以使代码更易于测试。不过,您仍然可以使用进行测试,但这有点困难