the following code displays 5 different emojis @ bottom of screen, , 1 emoji in upper center. trying make when 1 of emojis on bottom clicked, same emoji appears @ top center. able update atom contains emoji history :on-click, image not update current url.
(def emoji-history (atom {:current "img/sad-tears.png"})) (defn img40 [src reaction] [:img {:src src :style {:width "60px" :padding-right "20px"} :on-click #(do (js/console.log (get @emoji-history :current)) (swap! emoji-history assoc :current src) (js/console.log (get @emoji-history :current)))}]) (defn currentemoji [] [:img {:style {:width 40 :margin-top 15} :src (get @emoji-history :current)}]) (defn emojidisplay [] [:div {:style {:text-align "center"}} [currentemoji] [:div {:style {:text-align "center" :margin-top "200px" :padding-left "20px"}} [img40 "img/smile.png" "happy"] [img40 "img/sad-tears.png" "sad"] [img40 "img/happy-tears.png" "amused"] [img40 "img/surprised.png" "surprised"] [img40 "img/angry.png" "angry"]]])
refer reagent.core namespace , use reagent atom this:
(ns my-name.space.etc (:require [reagent.core :as r])) (def emoji-history (r/atom {:current "img/sad-tears.png"})) the line of code have here...
(swap! emoji-history assoc :current src) ...where swap! atom's value, correct :-)
unlike plain old clojure atom, when reagent atom's value (state) changed, re-render of ui triggered.
rarely entire ui re-rendered, though. because reagent wraps react, react system work out minimal required changes dom, it's pretty efficient.
Comments
Post a Comment