Question

我有一个选择组件，其中显示了标签和相关选项。有一个单独的“语言”选择，应选择显示语言。更改时，它同时更新选择标签语言的@language和提供选择选项的@search-language-options。标签会按预期更新，但选项列表不会更新-仍保持原始初始化状态。

;; search-languages -> vector
;; return the languages referenced in the data for options use

(defn search-languages []
  (let [options (list (tr {:dict ld} [@language :en] [:choice-any]))]
  (if (= @language :or) (concat options (vec (set (map (partial get-field "lang") parsed-json))))
    (concat options (vec (set (map (partial get-field "langTranslated") parsed-json)))))))

(def search-language-options (r/atom (search-languages)))

;; filter component -> component
;; create a select
(defn select-filter-component [label value options]
  [:div {:class "form-group"}
  [:label {:class "control-label" :for label} label]
  [:select {:id label :class "form-control" :value @value :on-change #(reset! value (-> % .-target .-value))}
    (for [opt options]
      ^{:key opt} [:option {:value opt} opt])]])

;; lang-select -> component
;; choose display language 
(defn lang-select []
[:div {:class "form-control" }
  [:select {:id :en :value @language :on-change (fn [e]
    (reset! language (.. e -target -value))
    (reset! search-language-options (search-languages)))
    }
  ^{:key :en} [:option {:value :en} "English"]
  ^{:key :fr} [:option {:value :fr} "Français"]
  ^{:key :es} [:option {:value :es} "Español"]
  ^{:key :or} [:option {:value :or} "Original language"]
  ]])

;; filter form
;; filter the results
(defn filter-form []

[:form {:class "form-inline"}
[search-filter-component (tr {:dict ld} [@language :en] [:search] ) search-text]

[select-filter-component (tr {:dict ld} [@language :en] [:language] ) search-language @search-language-options]
[select-filter-component (tr {:dict ld} [@language :en] [:gender] ) gender ["Any" "M" "F"]]
[select-filter-component (tr {:dict ld} [@language :en] [:continent/title] ) continent ["Any" "Europe"]]
[select-filter-component (tr {:dict ld} [@language :en] [:country] ) placeTranslated ["Any" "Austria" "Switzerland" "Germany"]]
[select-filter-component (tr {:dict ld} [@language :en] [:literaryForm] ) literaryForm ["Any" "Drama" "Poetry" "Prose: fiction" "Prose: non-fiction" ]]
[select-filter-component (tr {:dict ld} [@language :en] [:genre] ) genre ["Any" "Short story" "Novella" "Graphic Novel"]]
[reset-button]]

)

Answer 1

您是说[:option...]中的select-filter-component元素不变吗？如果这是您的意思，那么很难从发布的代码中看出为什么它们没有更改，因为这些选项是根据传递给select-filter-component的道具来呈现的，并且您还没有显示如何调用{{ 1}}。具体来说，此代码完全取决于传入的select-filter-component道具：

options

（旁注：尽管在这里没关系，请注意(for [opt options] ^{:key opt} [:option {:value opt} opt])是惰性的，因此，如果您在for中引用原子，请注意，必须将其包装在for或原子在渲染期间不会被引用，并且当原子更新时，您的组件也不会更新。）

如果您认为用鼠标选择其他选项无效，那是因为您已注释掉doall处理程序。

试剂/ ClojureScript-多个组件方面的更新

1 个答案: