CODEWITHSUNDEEP
javascriptreactjsonclickmaterialize
KellysOnTop23
KellysOnTop23

Reputation: 1435

clicking on icon inside button of materialize-css react triggers onClick

Clicking on the button triggers the onClick appropriately but clicking on the icon within the button triggers the onClick as well but without the right data (item.target.className and what not)

<button id={check} onClick={this.changeTimesButton} className="waves-effect waves-light btn"><i className="material-icons">check_box</i></button>

Is there anyway to disable the icon being able to be clicked

using materialize-css in react project

Upvotes: 1

Views: 3231

Answers (1)

Amir Mohammad Moradi
Amir Mohammad Moradi

Reputation: 887

if u cannot handle event.target in this.changeTimesButton(event) :

set onClick() on icon tag then prevent the default action

    <button id={check} onClick={this.changeTimesButton} 
      className="waves-effect waves-light btn">
      <i className="material-icons" onClick={(e)=>{e.preventDefault()}}>check_box</i>
    </button>

UPDATE

you can use stopPropagation instead of preventDefault

for more details on stopPropagation and preventDefault see this :

What's the difference between event.stopPropagation and event.preventDefault?

Upvotes: 2

Related Questions