Я работал над связанным текстовым полем и компонентом списка, аналогичным компоненту combobox или typeahead. Я хочу иметь возможность напечатать текст в текстовом поле, если не щелкнуть элемент из списка, и в этом случае переписать текстовое поле с текстом выбранного элемента.Реагент не перерисовывает при первом переходе ratom
Эти два компонента содержатся в одном родительском div, которому принадлежит рамат, который поддерживает состояние выбора. Рамат инициализирован ноль, но обновляется, когда выбран элемент списка. Я хотел бы, чтобы значение текстового поля обновлялось только тогда, когда содержимое ratom не было нулем и не допускало бесплатной записи, когда значение ratom равно nil.
К сожалению, это работает только для второго отдельного щелчка компонента списка, а затем. Текстовое окно не обновляется при первом щелчке, даже если проверка консоли показывает, что это атрибут 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!"}]]
Styling является по существу такой же, как в выпадающем меню, например CSS из W3Schools (http://www.w3schools.com/css/css_dropdowns.asp).
TIA.