Fork me on GitHub
#reagent
<
2018-10-18
>
gamecubate23:10:11

Hi folks. I want to listen for Bootstrap (4) collapse element events in ClojureScript. In JS, example goes like this:

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})
In CLJS, I create the element thus:
[:div.collapse {:id "outdoors" :on.hidden.bs.collapse #(.log js/console "hidden")}
  [:h1 "title"]]
which of course doesn't work. React.js output =
Unknown event handler property onHidden.bs.collapse. It will be ignored.
. Not sure how to name such an event in a Reagent->React-compliant way.

gamecubate23:10:57

I assume that Bootstrap event is the nested child of some event tree.

justinlee23:10:16

@gamecubate you’ll want to create a form-3 component, set a ref on the div and then, in componentDidMount, use ref.addEventListener

justinlee23:10:51

sorry i’m back to programming in typescript, so it’d be (.addEventListener ref ...)

gamecubate23:10:08

The argument to that listener would take the form

(-> js/hidden .-bs .-collapse)
?

justinlee23:10:45

the .on thing is a jqueryism, which I assume you are not loading

justinlee23:10:13

I assume the .on is implemented with addEventListener under the covers, but there might be some other way

gamecubate23:10:03

correct. I usually name my CLJS handlers per the standard :on-click, :on-change, :on-window-resize nomenclature. Just not sure how to express hidden.bs.collapse events

justinlee23:10:36

so i think it’d be (.addEventListener ref "hidden.bs.collapse" (fn [e] ...))

justinlee23:10:44

the event name is just a string

gamecubate23:10:33

this is a good trail. thanks a bunch.

justinlee23:10:40

the :on-click stuff is built into the react virtual dom api, but the bootstrap stuff won’t be part, so you’ll have to reach down to the js dom api