Pourquoi n'est-il pas possible de définir l'état d'un composant réactif dans un let?

Question

Dites que nous avons une zone de texte de texte définie dans la syntaxe hiccup.

(def written-text (reagent/atom "")) 

(defn text-area [] 
    [:textarea 
    {:value  @written-text 
     :on-change #(reset! written-text (-> % .-target .-value)) 
     :on-click #(println @written-text)}]) 

dire que nous voulons avoir plusieurs copies de texte zone dans notre document, chaque état avec tout différent. Ensuite, nous devrons déplacer l'état actuellement disponible pour tous dans l'espace de noms actuel dans un symbole de portée lexicale. Quelque chose comme:

(defn text-area [] 
    (let [written-text (reagent/atom "")] 
    [:textarea 
    {:value  @written-text 
     :on-change #(reset! written-text (-> % .-target .-value)) 
     :on-click #(println @written-text)}])) 

Mais tel quel, ce code ne fonctionne pas. Le champ de texte finit toujours vide, peu importe ce que l'utilisateur entre. Pourquoi donc? Et comment joindre mon état dans une portée lexicale par composant?

Answer 1

La réponse à ce problème peut être trouvée dans le re-frame documentation qui décrit les différentes formes de composants qui sont normalement trouvés dans un projet de réactif. Il indique que pour fournir une portée lexicale persistante pour l'état par composant à vivre, il faut écrire une fonction qui retourne une autre fonction de rendu; sinon, l'atome d'état sera redéfini chaque fois que le réactif essaie de rendre le composant à nouveau. Donc, pour le composant donné:

(defn text-area [] 
    (let [written-text (atom "")] 
    (fn []          
     [:textarea 
     {:value  @written-text 
     :on-change #(reset! written-text (-> % .-target .-value))}]))) 

De cette façon, la fonction appelée par le réactif lorsqu'il souhaite redessiner le composant est l'interne, anonyme, fonction. Le let qui définit la portée lexicale ne sera pas relancé.

Tout le crédit pour cette réponse va à l'utilisateur mccraigmccraig sur le slack clojurians.