firing onClick handler when click on component inside it

Question

when i click on button section its working fine , but the problem is when i click on Component section inside button then my function not firing

this.resetStates = this.resetStates.bind(this) ;

<button onClick={this.resetStates}>
    <NumberFormat/>
</button>

So your desired outcome is to have the function fire when you click on the NumberFormat component? — C. J. Tantay, Oct 14 '19 at 04:32
possible duplication / helpful : https://stackoverflow.com/questions/33840150/onclick-doesnt-render-new-react-component — Jass, Oct 14 '19 at 04:36
resetStates using setStates method to set new value of state — sajjad okati, Oct 14 '19 at 05:32
i want to fire function when user clicks on numberFormat Component — sajjad okati, Oct 14 '19 at 05:34

score 0 · Answer 1 · answered Oct 14 '19 at 10:41

I use a CSS lot of the time with similar problems in svg. It might help you here too. You can put pointer-events: none to the inner component. This way the inner component is not clickable and every click event come to the outer button component. For example:

<button onClick={this.resetStates}>
  <div style={{pointerEvents: 'none'}}>
     <NumberFormat/>
  </div>
</button>

Is it helping you?

firing onClick handler when click on component inside it

1 Answers1