HandleClick using React JS not Working with bind

Question

This is my code for react

handleRemoveClick = material => {
  let idMaterial = material.material_id;
  if(this.state.operation === 0){
    this.setState( { previewShowAlertRemoveProduct : true })
    }
    this.setState( { operation : 1, material_id : idMaterial})
}



handleEndOrder(){
  if(this.state.operation === 0){
    this.setState( { previewShowAlertRemoveProduct : true })
    }
    this.setState( { operation : 2})
}

This is for Render the View:

  <button class="btn btn-xs btn-danger pull-right"  onClick={e => this.handleRemoveClick(material)}>x</button>

How to fix this ? onClick it's not working at all I have binded in the constructor the handleEndOrder

@ShubhamKhatri The functions it's not called when i click in button. — user9655816
– user9655816, Commented Apr 27, 2018 at 13:13

Shubham Khatri · Accepted Answer · 2018-04-27 13:15:30Z

2

Since you haven't specified the type on button, it is by default submit, you need to either specify the type="button" or use e.preventDefault() like

<button class="btn btn-xs btn-danger pull-right" type="button" onClick={e => this.handleRemoveClick(material)}>x</button>

or

handleRemoveClick = (e, material) => {
  e.preventDefault();
  let idMaterial = material.material_id;
  if(this.state.operation === 0){
    this.setState( { previewShowAlertRemoveProduct : true })
    }
    this.setState( { operation : 1, material_id : idMaterial})
}
<button class="btn btn-xs btn-danger pull-right"  onClick={e => this.handleRemoveClick(e, material)}>x</button>

answered Apr 27, 2018 at 13:15

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user9655816 Over a year ago

So in case i want to call the handleEndOrder i only need define .bind in constructor and type button ?

Shubham Khatri Over a year ago

Glad to have helped :-)

Collectives™ on Stack Overflow

HandleClick using React JS not Working with bind

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related