试剂，UIkit下拉使用
试剂，UIkit下拉使用
提问于 2018-09-09 00:24:37
我正在尝试使用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()尝试它，它会再次工作，但不是从Reagent on-click处理程序。任何帮助都是非常感谢的。
我在评论后尝试的另一个版本是：
(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
Stack Overflow用户
发布于 2018-09-11 14:03:40
(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"]]))))我还没有尝试过，但是你可能只需要在组件挂载后创建一次dropdown对象，所以你需要试剂形式-3组件，它允许你使用react生命周期钩子。我不熟悉UIkit，所以这只是一个猜测。
Stack Overflow用户
发布于 2018-09-09 00:45:20
如果JS调用中存在有状态的东西，那么获取调用(.dropdown js/UIkit ...)的结果，将其存储为应用程序状态的一部分，并将其传递到组件中可能会有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52237173
复制相关文章
相似问题
腾讯云开发者
