이미지가 스왑으로 업데이트되지 않음

다음 코드는 화면 하단에 5 개의 다른 이모티콘과 상단 중앙에 1 개의 그림 이모티콘을 표시합니다. 나는 하단에있는 그림 이모티콘 중 하나가 클릭 될 때 동일한 그림이 상단 중앙에 표시되도록하기 위해 노력하고 있습니다. 이모티콘 기록을 포함하는 아톰을 업데이트 할 수 있습니다 : 클릭 할 때 이미지가 현재 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"]]])

출처

2017-04-05 Jessie Richardson

시약을 사용하고 있습니까? 그것이 'r/atom'일 것임에 틀림 없다 - 왜 당신은 clojure 아톰에 대한 업데이트가 어떤 것을 트리거 할 것으로 기대 하는가? - 제공 한 코드를 기반으로합니다. – birdspider

이미지 소스를 업데이트 할 때 : on-click. 그리고 네, 시약 사용. 후드 밑에서 무슨 일이 일어나고 있는지 모두 잘 알고있는 것은 아닙니다. –

reagent.core 네임 스페이스를 참조하여이 같은 시약 원자를 사용

(ns my-name.space.etc 
    (:require [reagent.core :as r])) 

(def emoji-history 
    (r/atom {:current "img/sad-tears.png"}))

당신이 여기있는 코드 줄 ...

(swap! emoji-history assoc :current src)

합니다 ... swap! 원자가의 값은 정확합니다 .-)

평범한 Clojure ato와는 달리 m, 시약 원자의 값 (상태)이 변경되면 UI의 재 렌더링이 트리거됩니다.

전체 UI가 거의 다시 렌더링되지는 않습니다. Reagent가 React를 감싸기 때문에, React 시스템은 DOM에 최소한의 변경이 가해질 것이므로 매우 효율적입니다.

출처

2017-04-05 19:15:47 Scott

OMG 정말 고마워요. 나는 시약이 필요하다는 것을 잊어 버렸습니다. :피 –

이미지가 스왑으로 업데이트되지 않음

답변

관련 문제