如何正确访问Reagent Component的子元素?

时间:2016-10-28 11:43:06

标签: jquery reactjs clojure clojurescript reagent

我是一个clojure / Clojurescript初学者。这是关于我的第一个 Luminus 网页应用 Reagent 。 我设法通过迭代填充8个上传按钮,并使用reagent/render-component函数填充。

我在循环中有一个以下打嗝结构,所有循环项都作为反应组件返回。

(let [state_ (reagent/atom (into [] (take 8 (repeat "img/image.png"))))
      state' @state_
      ad-box
      [:div {:class "col-md-3 ui segment "}
       [:img {:class "ui small image"
              :src (nth state' idn)}]
       [:div {:class "ui icon buttons"}
        [:button {:class "ui green button img-btn s-btn"}
         [:i {:class "fa fa-picture-o"}]]
        [:input {:class "inputfile"
                 :type "file"
                 :id (str "ad-pic-" idn)
                 :name (str "ad-pic-file-" idn)
                 :on-change (fn [e]
                              (this-as this
                                (let [el this
                                      name (.-name el)
                                      file (aget (.-files el) 0)
                                      form-data (doto
                                                    (js/FormData.)
                                                    (.append name file))]
                                  (POST "/upload-pics"
                                        {:headers {"x-csrf-token"
                                                   (.-value (.getElementById js/document "token"))}
                                         :body form-data
                                         :response-format :json
                                         :keywords? true
                                         :handler handle-response-ok
                                         :error-handler handle-response-error})
                                  (set-upload-indicator))))}]
        [:button {:class "ui disabled button img-btn r-btn" }
         [:i {:class "fa fa-times"}]]]]]
  ad-box)

创建“组件上传”按钮后,用作 type =" file" 行为。但问题是我无法通过ajax请求将上传的文件参数发送到后端。

抱歉这个问题更长了。如果你能看到这个,我非常感激。感谢。

1 个答案:

答案 0 :(得分:1)

使用:

(-> e .-target .-files (aget 0))

而不是:

(aget (.-files el) 0)