javascript - 使用 React JS 的 HandleClick 不使用绑定(bind)

Question

这是我的 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})
}

这是为了渲染 View :

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

如何解决这个问题？ onClick 它根本不起作用我在构造函数中绑定(bind)了 handleEndOrder

Answer 1

因为你没有指定按钮的类型，默认是submit，你需要指定type="button"或者使用 e.preventDefault() 喜欢

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

或

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>