How to hang an event handler on a part of a child component?

P

Petr Muhurov2018-03-30 15:04:00

JavaScript

Petr Muhurov, 2018-03-30 15:04:00

There is a component from the finished toolkita (ant design). There was a need to hang the onWheel event on this component, which by itself does not allow this event to be thrown inside.
Conditionally, the component itself

<Component>
  <Header/>
  <Body/>
</Component>

Accordingly, I write a wrapper

class Wrapper tratatata {
  onWheel(e) {...}
  render() {
    return (
      <div onWheel={this.onWheel}>
        <Component />
      </div>
    )
  }
}

Accordingly, according to the wheel event, the props that fall into <Component />. But the problem is that this event is hung on my wrapper, and I need to hang it only <Body/>on <Component />. Catching the onWheel target and using the DOM to check under which part (under <Body />or under <Header />) at the moment the event is triggered, the mouse is completely nonsense, I can’t place refs. How to be?
Thanks

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

D

davidnum95, 2018-03-30
@davidnum95

<Component>
  <Header/>
  <Wrapper>
    <Body/>
  </Wrapper>
</Component>

class Wrapper tratatata {
  onWheel(e) {...}
  render() {
    return (
      <div onWheel={this.onWheel}>
        {this.props.children}
      </div>
    )
  }
}