Fork me on GitHub

How can I trigger a click event on an element inside a Reagent component? I'd usually use React Refs but these are not available in Reagent


@martinklepsch Reagent does allow you to specify a :ref which can be a function or a string (here is a function example: For the alternative file selection button I prefer to just wrap the input in a label (clicking the label opens the file dialog):

          {:type "file"
           :accept "image/*"
           :style {:display "none"}
           (fn image-selected [e]
             (let [r (js/FileReader.)]
               (set! (.-onload r)
                     (fn [e]
                       (reset! img (.. e -target -result))))
               (.readAsDataURL r (aget (.. e -target -files) 0))))}]
          {:title "Background"}
          [:i.material-icons "image"]]]
But based upon the stack overflow you linked earlier, it is impossible to trigger a click except from an event generated by the user. Assuming you are on that path, then calling .click on the DOM element should be fine, the DOM element could be captured from either component-did-mount or the ref... I think you know all this so can you explain in more detail what the issue is?


@timothypratley so I eventually ended up just using a random UUID as :id + goog.dom/getElement which is a reasonable solution I guess. I know that I can pass refs to nodes but what I fail to understand is how I can retrieve them. Using a function as value (which I didn't know about) it seems I could stash the element in an atom so I can retrieve it later but that seems a good bit more complex than how you'd use refs usually


@martinklepsch, ref callbacks are great and pretty simple. For some background see


@pesterhazy thanks! Didn't know about callback refs so that didn't come to mind but seems like a solid approach


For now I'm ok with just giving it a random ID, not perfect but certainly good enough ¯\(ツ)