gpt4 book ai didi

javascript - 如何使用 Reagent Hiccup 添加点击事件以在 ClojureScript 中触发 JavaScript 事件

转载 作者:行者123 更新时间:2023-12-01 16:18:55 25 4
gpt4 key购买 nike

我刚开始使用 Reagent,对 Clojure 还是个新手。

我创建了一个移动菜单功能,并希望移动汉堡菜单可以点击以显示实际菜单。再次点击时,菜单必须隐藏。我不知道该怎么做

(defn mobile-menu [primary-menu secondary-menu logo-el]
[:div#ca-horizontal-mobile
[:div#logo logo-el]
[:div#menu-button
[:a
[:i.icon.bars]]]

[:header#menu.mobile
[:div
[:div.center.menu
(let [menu (concat primary-menu secondary-menu)]
(for [i menu]
[:div.item {:key (:key i)}
[:a.item {:id (:key i)
:href (:target i)} (:name i)]]))
[:div.item
[:a
{:style {:cursor :pointer}
:id :logout
:on-click #(re-frame/dispatch [:logout])} (str "Logout")]]]]]])])

anchor 需要展开和隐藏菜单。

   [:a
[:i.icon.bars]]]

我所需要的只是一个示例,说明如何对 JavaScript 事件进行 JavaScript 调用,以及一点帮助理解它。

我在网上找到了这段代码 https://www.reddit.com/r/Clojure/comments/4ofct5/calling_methods_on_an_element_in_a_reagent/但我不确定它是如何连接到任何东西上的。 .play 元素如何知道 on-click 做什么?

(defn video-elem [src-url uid]
[:div
[:video {:src src-url :id uid}]
[:button {:on-click #(.play (.getElementById js/document uid))} "Play!"]
[:button {:on-click #(.pause (.getElementById js/document uid))} "Pause!"]])

最佳答案

在同事的帮助下,我们添加了以下内容。不过,我不确定我是否解释正确。

(re-frame/reg-event-db
:toggle-mobile-menu
(fn [db _]
(assoc db :mobile-menu-visible (not (:mobile-menu-visible db)))))

(re-frame/reg-sub :show-mobile-menu #(:mobile-menu-visible %))))

(defn mobile-menu [primary-menu secondary-menu logo-el]
[:div#ca-horizontal-mobile
[:div#logo logo-el]
[:div#menu-button
{:on-click #(re-frame/dispatch [:toggle-mobile-menu])}
[:i.icon.bars]]

(let [show-menu (re-frame/subscribe [:show-mobile-menu])]
(if @show-menu
[:header#menu.mobile
[:div
[:div.center.menu
(let [menu (concat primary-menu secondary-menu)]
(for [i menu]
[:div.item {:key (:key i)}
[:a.item {:id (:key i)
:href (:target i)} (:name i)]]))
[:div.item
[:a
{:style {:cursor :pointer}
:id :logout
:on-click #(re-frame/dispatch [:logout])} (str "Logout")]]]]]))])]])
  • 菜单按钮点击事件调度一个 :toggle-mobile-menu re-frame/reg-event-db 切换菜单的可见性

  • show_menu 绑定(bind)订阅了 re-frame/reg-sub :show-menu-mobile获取:来自数据库的 mobile-menu-visible` 值

  • 数据库中的 @show-menu 值被解构为真值,指示菜单是应该隐藏还是显示。

关于javascript - 如何使用 Reagent Hiccup 添加点击事件以在 ClojureScript 中触发 JavaScript 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51373458/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com