active-group / reacl

ClojureScript library for interfacing with React framework
78 stars 1 forks source link

letdom and dom-node does not work (as described) #37

Open dfrese opened 5 years ago

dfrese commented 5 years ago

The documentation of letdom is quite outdated, but in particular states that one could access 'bound' dom element in its 'own' event handler:

      (reacl.core/defclass search-bar
        app-state [filter-text in-stock-only on-user-input]
        render
        (fn [& {:keys [dom-node]}]
          (dom/letdom
           [textbox (dom/input
                     {:type \"text\"
                      :placeholder \"Search...\"
                      :value filter-text
                      :onChange (fn [e]
                                  (on-user-input
                                   (.-value (dom-node textbox))
                                   (.-checked (dom-node checkbox))))})
            checkbox (dom/input
                      {:type \"checkbox\"
                       :value in-stock-only
                       :onChange (fn [e]
                                   (on-user-input
                                    (.-value (dom-node textbox))
                                    (.-checked (dom-node checkbox))))})]
           (dom/form
            textbox
            (dom/p
             checkbox
             \"Only show products in stock\")))))
  1. render as a function of {:dom-node ..} is not possible anymore, I'm quite sure.
  2. a global dom-node function exists, but that takes the component as a first arg.
  3. Calling dom-node in an event handler like here returns undefined (at least in a simplified test-case) What does still work is rendering the things bound by letdom.

Given that refs have been introduced a while ago, I'd say we can quickly phase out letdom all together. Also, people collect the states of the two components in a common local or app-state anyway, and never access anything else than the .-target of an event handler.