0
私は、コンボボックスや先読みコンポーネントと同様に、リンクされたテキストボックスとリストコンポーネントに取り組んでいます。リストから項目をクリックしない限り、選択した項目のテキストでテキストボックスを上書きしない限り、テキストボックスに自由にテキストを入力できます。試薬はラットの最初のトランジションで再レンダリングしません
これらの2つのコンポーネントは、選択状態を維持するratomを所有する1つの親divに含まれています。 ratomは最初はゼロですが、リスト項目が選択されると更新されます。私は、テキストボックスの値がratomの内容がnilでない場合にのみ更新され、ratomの値がnilの場合はフリーエントリーをpremitしたいと思います。
これは、リストコンポーネントの2回目以降のクリックに対してのみ有効です。コンソールの検査でvalue属性が更新されていることが示されていても、テキストボックスは最初のクリックでは更新されません。だから、それはレンダリングを起動する問題のように見えます。
ここでは、コードは（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。