Question

我一直在处理链接的文本框和列表组件，类似于组合框或先行组件。我希望能够在文本框中键入自由文本，除非单击列表中的项目，在这种情况下用所选项目的文本覆盖文本框。

这两个组件包含在一个父div中，该div拥有维持选择状态的ratom。 ratom最初为零，但在选择列表项时会更新。我希望只有当ratom的内容不为零时才更新文本框的值，并且当ratom的值为零时不允许自由输入。

不幸的是，这仅适用于list-component的第二次不同点击，之后。即使控制台检查显示其值属性已更新，第一次单击时文本框也不会更新。所以，它看起来像是一个触发渲染的问题。

这里是代码（使用dommy）......

 (defn text-box [selection]
  [:input.jdropbtn
   (into
     {:type        :text
      :placeholder "Dropdown"
      :on-change   #(.log js/console
                          (let [v (-> % .-target .-value)
                                opts (-> % .-target .-nextSibling dom/children array-seq)]
                            ;(doseq [t opts] (dom/toggle! t (clojure.string/includes? (dom/text t) v)))
                            ))}

     (when @selection
       {:value (:value @selection)} )  ; This fails on first selection!

     ; {:value  (:value @selection)} ; This prevents free typing!

     )
   ]
)

(defn list-component [selection data-key items]
  [:div.jdropdown-content

   (for [i items]
     (let [{:keys [id value] :as item} i]
       ^{:key id} [:a {data-key id :on-click #(reset! selection {:id id :value value}) } value])
     )
   ]
)

;;;;;;;;;;;;;;  parent 
(defn my-droplist [data-key items]
  (let [selection (r/atom nil) ]
    (fn []
      [:div.jdropdown {:id "jack"}
       [text-box selection]
       [list-component selection data-key items]
       ])
    ))


    ; invoked as:

[my-droplist :data-appid 
     [{:id 11 :value "Hey there!"}
      {:id 22 :value "Hi there!"}
      {:id 33 :value "Ho there!"}]]

样式与w3schools（http://www.w3schools.com/css/css_dropdowns.asp）的下拉菜单css示例基本相同。

TIA。

Answer 1

好的，这都是关于控制的;试剂不喜欢分享。如果我总是从ratom设置文本框的值，并更新ratom on-change，它就可以工作。此外，ratom初始化为空字符串而不是nil。

事情是，每次（正如我原来做的那样）只是解除引用 ratom并没有帮助。似乎我每次都必须写 ratom的值到文本框的值。

试剂在第一次转变时不会重新呈现

1 个答案: