Fork me on GitHub
#reagent
<
2018-10-17
>
sb10:10:40

How possible detect multiple keys at Reagent? e.g. at :on-key-down when I want to detect SHIFT+ENTER, when (.-key e) give me back input .. I see just SHIFT event, possible to see SHIFT+ENTER response?

jcb22:10:13

does anyone know how to attach or change a css class on a reagent callback ref?

jcb22:10:14

also is there any documentation of how to target a specific dom element from outside of the ref scope?

justinlee22:10:00

wait what do you mean attach a css class “on a reagent callback ref”

jcb22:10:28

sorry, i guess unclear

jcb22:10:01

so I have a ref to my element but i'd like to change it's class

jcb22:10:59

looking at react docs, there seems to be a whole set of style props but the reagent way is unclear

justinlee22:10:46

it’s pretty much the same, but you provide a map for :style and you use :class instead of className

justinlee22:10:14

you don’t want to programmatically change the style using the ref, you just want to re-render with the new style/class like you would in react

jcb22:10:43

so re-render with a new class attribute?

justinlee22:10:57

yea. then the magic of react will make the change for you

jcb22:10:12

sorry it's late here, I don't understand how to pass it in

justinlee22:10:25

could you show me the hiccup you are working with?

justinlee22:10:37

this is how you do a style [:span {:style {:color "red"}} "red text"]

justinlee22:10:27

classes are either [:span.MyClass] or [:span {:class "MyClass"}]

jcb22:10:32

yeah but I want to change the class of specific children depending on interaction and state of other components

jcb22:10:20

I thought refs where the way to go as of reagent 0.8

jcb22:10:25

or react 16

justinlee22:10:00

so something like [:span {:style {:color (if (= status :red) "red" "black")}} "text"]

justinlee22:10:38

you don’t need refs here. refs are only handy if you need to access the underlying dom element or you have a library that exposes methods

justinlee22:10:00

like if you need to focus an input element by calling .focus() then you need a ref

justinlee22:10:53

declaratively writing code to specify your styling based on state is kind of the raison d’etre of react

jcb22:10:20

ok thanks

justinlee22:10:32

if you’re having trouble, maybe post a little snippet and maybe i can help

jcb22:10:30

ok its basically a parent with a number of children generated to represent part of a json map

jcb22:10:59

but i'd like to keep a reference to that specific child

jcb22:10:51

so that when another is selected I can revert that child back to it's original style

justinlee22:10:40

so the react way of doing that is you just regenerate the whole tree based on the new state. so you’ll have a variable somewhere, either in a component-local closure or in a state atom, that records which thing is selected. then you just style each component based on that data.

justinlee22:10:15

i think you are approaching this the way you’d do it in jquery, where when something gets selected you’d go select the right nodes and then change them imperatively

jcb22:10:36

ok perhaps

justinlee22:10:36

well, and to more directly answer your question, I do not know how to change styling given a ref. you could probably use the DOM API to do it directly, but react is probably going to clobber it in unpredictable ways in later renders

jcb22:10:19

ok, I guess I was hoping there was a reagent way to do this rather than querying the map again

justinlee22:10:50

i’m not sure what you mean. you should just write the render method as a pure function of state. keep the selected elements in state, then when you render each child, write conditional logic to set the styling. react will preform vdom reconciliation and do the mutations to the real dom for you.

jcb22:10:50

I think we mean the same thing :man-shrugging::skin-tone-4:

jcb22:10:24

thanks for straightening me out and pointing me the right direction yet again!