clojurescript - Antizer表单提交数据处理

Question

我想通过 antizer 在试剂中使用 ant design 组件，但我不知道如何在提交后从表单中提取字段值。我在文档中找不到任何内容。

比我更专业的人解决了这个问题？

Answer 1

如果您为ant/validate-fields函数提供回调，它将接收两个参数：errors和values.

如果输入有效，errors将为null.

第二个参数将始终包含当前表单数据。

;; Receive the output of `ant/validate-fields`, and react accordingly
(defn submit-form-if-valid
  [errors values]
  (if (nil? errors)
    (println "Form is valid."     values)
    (println "Validation failed." errors)))

(defn sample-form
  (fn [props]
    (let [my-form         (ant/create-form)
          submit-handler #(ant/validate-fields my-form submit-form-if-valid)]
      [:div
       [ant/form {:on-submit #(do
                                (.preventDefault %)
                                (submit-handler))}
         [ant/form-item ...]
         [ant/form-item ...]
         [ant/form-item ...]
         [ant/form-item
           [ant/button {:type "primary"
                        :html-type "submit"}
            "Submit"]]]])))

注意：就个人而言，我只使用此功能来检查errors. 每次用户更改字段时，我的表单数据都会持续记录在app-db中。所以我的提交处理程序看起来更像这样：

(defn submit-form-if-valid
  [errors _]
  (when (nil? errors)
    (dispatch [:sample-form/submit!])))

我的重新框架事件看起来像这样。一个用于更新 DB 中的表单数据的事件（使用表单输入提供的键/值对），另一个用于实际提交表单：

(reg-event-db
 :sample-form/update-value
 [(path db/path)]
 (fn [db [_ k v]]
   (assoc-in db [:sample-form-data k] v)))

(reg-event-fx
 :sample-form/submit!
 [(path db/path)]
 (fn [{:keys [db]} _]
   (let [form-data (:sample-form-data db)])
     ;; ... send data to back-end, handle the response, etc.
  ))

我的每个表单输入都会像这样调用该事件：

[ant/form-item 
  (ant/decorate-field my-form "Thing #1" {:rules [{:required true}]}
    [ant/input {:on-change #(dispatch [:sample-form/update-value :thing1 (-> % .-target .-value)])}])]

希望这可以帮助！