Using onclick in children

Question

I'm recently using react-spring and it works really well but I'm having some issues when I have to apply an onClick on childs.

Here is my main structure:

<anim.button  className="c"
   style={{ opacity: opacity.interpolate(o => 1 - o), transform }}>
   <Bar />
</anim.button>
<anim.button  className="c"
   style={{ opacity, transform: transform.interpolate(t => `${t} 
   rotateX(180deg)`) }}>
   <Bar />
</anim.button>

An onClick on the anim.button would work perfectly fine of course, but that's not what I'm trying.

Here is my <Bar /> component:

  const Bar = () => (
    <div className="bar">
      <Checkbox
        onClick={() => {
          set(state => !state)
        }}
      />
    </div>
  )

I also tried using the <anim.div> instead of an <anim.button> but this gives me the same results.

Now the problem here is that it seems like react-spring puts a layer onto my <Bar /> component. Is there a way to use the onClick in my component instead of the one that is used onto anim.button?

`set` comes from a React `useState` and holds the animation's current state — Trisma, Nov 14 '19 at 15:48
but you don't have it defined anywhere.. or it's just missing in the snippet ? — Smail Galijasevic, Nov 14 '19 at 15:50
Yes it is missing in the snippet, I didn't put the basic `react-spring` setup in there. — Trisma, Nov 14 '19 at 15:51
You'll have to pass some onClick function down to Bar so it can use it instead — Shimmy568, Nov 14 '19 at 15:57
That won't work either, even a `console.log()` in an `onClick` will not work. `anim.button` blocks that apparently — Trisma, Nov 14 '19 at 16:01

score 1 · Answer 1 · edited Nov 14 '19 at 18:23

1

Given that Checkbox is also a component and it might not have onClick handled try putting onClick on the wrapping div or inspect the Checkbox component.

edited Nov 14 '19 at 18:23

Jayakumar Thangavel

1,884
1
22
29

answered Nov 14 '19 at 15:56

Smail Galijasevic

773
4
16

Even with a default html button and an onclick it results in nothing – Trisma Nov 14 '19 at 16:00

score 1 · Answer 2 · answered Nov 14 '19 at 18:40

Haven't used react-spring ever but structuring your Bar component like this may do the trick.

const Bar = (props) => (
<div onClick={() => {set(state => !state)}}>
 <anim.button  {...props}>
   <div className="bar">
     <Checkbox />
   </div>
 </anim.button>
</div>)

then rendering it like this:

<Bar className={'c'} style={{ opacity: opacity.interpolate(o => 1 - o), transform}}/>
<Bar className="c" style={{ opacity, transform: transform.interpolate(t => `${t}
    rotateX(180deg)`) }}/>

But this will result in the same problem. The while bar is clickable when it shouldn't. Only the checkbox should — Trisma, Nov 15 '19 at 08:33

score 0 · Answer 3 · answered Nov 14 '19 at 17:34

0

You could rather wrap the Bar in a div: <animated.div> you are wrapping a button around a checkbox which is not great. onClick will trigger as expected.

<animated.div className="c"
   style={{ opacity, transform: transform.interpolate(t => `${t} 
   rotateX(180deg)`) }}>
   <Bar />
</animated.div>

answered Nov 14 '19 at 17:34

Samuel Goldenbaum

18,391
17
66
104

This is what I initially did but this don't work either. only the `onClick` on `` is used. The div becomes clickable but not the children – Trisma Nov 15 '19 at 08:27

score 0 · Answer 4 · answered Nov 15 '19 at 11:23

0

Issue has been found and didn't actually has anything to do with react-spring. The position absolute styling was causing this.

answered Nov 15 '19 at 11:23

Trisma

735
6
19

Using onclick in children

4 Answers4