Реагент, использование раскрывающегося списка UIkit - PullRequest
Новая
       11

Реагент, использование раскрывающегося списка UIkit

0 голосов
/ 08 сентября 2018

Я пытаюсь использовать выпадающий список UIkit, но с javascript, а не с атрибутом uk-dropdown="target: #my-id" 

(defn uk-drop []
   [:div 
     [:div#my-id {:data-uk-dropdown true} "Some content"]
     [:button 
          {:on-click #(.show (.dropdown js/UIkit "#my-id"))} 
          "Open"]
     [:button 
          {:on-click #(.hide (.dropdown js/UIkit "#my-id"))} 
          "Close"])

К сожалению, это работает только один раз. Таким образом, он показывает раскрывающийся список, а затем скрывает его (или, может быть, только щелчок закрывает его, а не метод), но он не будет открывать его снова. Если я попробую его из консоли Chrome с UIkit.dropdown("#category1").show(), он снова будет работать, но не из обработчика нажатия реагента. Любая помощь приветствуется.

Другая версия, которую я попробовал после комментария: 

(defn uk-drop []
    (let [the-drop (atom nil)] 
    (fn [] 
     [:div
      [:div#my-id {:data-uk-dropdown true} "Some content"
      [:button
       {:on-click #(reset! the-drop (.dropdown js/UIkit "#my-id"))}
       "Make dropdown"]
      [:button
       {:on-click #(.show @the-drop)}
       "Open"]
      [:button
       {:on-click #(.hide @the-drop)}
       "Close"]]])))

Ответы [ 2 ]

0 голосов
/ 11 сентября 2018 
(defn uk-drop []
  (let [the-drop (atom nil)]
    (reagent/create-class
     :component-did-mount (fn [this]
                            (reset! the-drop (.dropdown js/UIkit "#my-id")))
     :reagent-render
      (fn []
        [:div
          [:div#my-id {:data-uk-dropdown true} "Some content"]
          [:button {:on-click #(.show @the-drop)} "Open"]
          [:button {:on-click #(.hide @the-drop)} "Close"]]))))

Я не пробовал этого, но вам, вероятно, нужно создать выпадающий объект только один раз после монтирования компонент, так что вам нужен компонент реагента формы-3, он позволяет вам использовать ловушки реагирования жизненного цикла. Я не знаком с UIkit, так что это всего лишь предположение.

0 голосов
/ 08 сентября 2018

если в вызове JS есть что-то с состоянием, то может помочь получение результата вызова (.dropdown js/UIkit ...), сохранение его как части состояния вашего приложения и передача его в ваш компонент.

...