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     "button"
            :value    "Save new question"
            :on-click #(re-frame.core/dispatch [:create-question @new-question])} ] ])))

Как сбросить @new-question на "" (пустая строка) после отправки?


clojurescript reagent re-frame
person aarkerio    schedule 11.10.2018    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Вы можете использовать reset! на ратоме после отправки:

#(do (re-frame.core/dispatch [:create-question @new-question])
     (reset! new-question ""))

чтобы сбросить его после отправки значения.

person Daniel Compton    schedule 12.10.2018

arrow_upward
2
arrow_downward

Вероятно, вы захотите ознакомиться с документацией по эффектам повторного кадрирования:

Обратите внимание, что вы также можете использовать dispatch-n:

и вы можете использовать синтаксис fn вместо синтаксиса сокращенной функции #(...):

:input {:type     "button"
        :value    "Save new question"
        :on-click (fn []
                     (re-frame.core/dispatch [:create-question @new-question])
                     (reset! new-question "")) } ]
person Alan Thompson    schedule 12.10.2018

arrow_upward
1
arrow_downward

Вы также можете использовать как события, так и подпрограммы, чтобы убрать как можно больше логики из кода вашего представления. Это означает, что вы получите множество любых событий и подписок, однако это задумано и идиоматично для переформулирования. Это делает код рефрейминга более понятным, разъединенным и более тестируемым. Вот пример:

(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 и reg-sub. Это может сделать код более пригодным для тестирования, позволяя тестовому коду напрямую вызывать обработчик функции. Однако вы все равно можете протестировать, используя Day8/re-frame-test, но это немного сложнее. .

person Caleb Macdonald Black    schedule 09.12.2018