This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2020-11-16
Channels
- # aleph (3)
- # announcements (14)
- # babashka (16)
- # beginners (85)
- # calva (6)
- # cider (9)
- # clojure (42)
- # clojure-australia (8)
- # clojure-europe (30)
- # clojure-nl (4)
- # clojure-uk (29)
- # clojuredesign-podcast (7)
- # clojurescript (25)
- # cursive (4)
- # data-science (1)
- # datomic (31)
- # emacs (1)
- # events (1)
- # fulcro (16)
- # instaparse (2)
- # java (37)
- # kaocha (3)
- # malli (3)
- # meander (19)
- # membrane (7)
- # off-topic (13)
- # pathom (4)
- # pedestal (10)
- # re-frame (17)
- # reveal (3)
- # rewrite-clj (1)
- # ring (9)
- # shadow-cljs (17)
- # spacemacs (2)
- # sql (34)
- # tools-deps (88)
- # vim (4)
What's the right way to call something like .scrollIntoView
on a Fulcro component? I'd like to be able to do this in the ok-action of a mutation, for example, not a button click. It's unclear to me how I should correctly get the javascript element that's needed to call this method. Thanks
do you know the component's ident in your ok-action? if so you could store a ref to the js element in component local state and get the component, then get the js element from local state
Yes, I do. What would the ref be? Do I give my component an id and store the value of .getElementById?
see :initLocalState
here: https://book.fulcrologic.com/#InputFocusandReactRefsLifecycle
(you'll need to know about react refs if you don't already: https://reactjs.org/docs/refs-and-the-dom.html)
basically what's going on here is that we want to save a reference to the JS object that has been created (so, after the first render at least) and we want to save it somewhere in the component that's (1) easy for fulcro-code to access and (2) OK with other principles of fulcro
from (1) alone the fulcro DB or component local state might have been ok, but we can rule out the fulcro DB from (2) since only immutable data should go in the db
so in initLocalState we make a function that, when passed as a :ref
prop, will save the ref to some property on this
(the component)
Thanks. I'm aware of ref props and local state. It's the functions I need to call and the parameters that they accept that I'm in the dark about. Thanks for the links. I'll read up
yeah looking at this example more closely i'm not actually sure this exact approach will work from you, i'm not sure if there's an easy way to get a ref to this
(the react element) from outside a component's lifecycle methods
i wonder if it'd be ok to save to fulcro's local state instead of to a property on the react element object, which is what that example is showing
In my initial search to answer this question, refs is what turned up. Although everything was restricted to react in javascript, and re-frame. I was thinking of a computed prop, like should-scroll?, which I could toggle in the ok-action via the component's ident. But then what the heck would I call when the computed prop changes? As a test, I tried calling scrollIntoView on this in an onClick handler, but that had no such method called scrollIntoView. I'm still not sure I even know what "this" is
this
in defsc
is the react component, which is like a wrapper over a raw DOM element (the ref). I use hooks for this, there's a fulcro wrapper hooks/use-ref
https://reactjs.org/docs/hooks-reference.html#useref