Javascript 单击react之前激发的onClick事件

每当用户单击“删除”按钮时，我都要删除li。所以我传递了索引，但在我点击它之前它被触发了，我想我传递值是做错了

var-App=React.createClass({
getInitialState（）{
返回{
项目：[1,2,3]，
isEdit:错
}
},
renderditform（）{
返回(
拯救
)
},
ItemCtrl（索引）{
返回(
编辑
删除
)
},
editHandler（）{
this.setState（{isEdit:true}）
},
saveHandler（）{
this.setState（{isEdit:false}）
},
德兰德勒（索引）{
console.log（index）//单击此处将接收索引
},
renderItem（）{
返回(
this.state.items.map（（item，i）=>
{this.state.isEdit？this.renderditform（）：item}{this.ItemCtrl（i）}
）
)
},
render（）{
返回(

{this.renderItem（）}

)
}
})
React.render（，document.getElementById（'container'）；

您正在执行函数，而不仅仅是设置它，这里：

onClick={this.dltHandler(index)}

如果要传递一些参数，请绑定它们。比如：

onClick={this.dltHandler.bind(this, index)}

或使用箭头功能：

onClick={() => this.dltHandler(index)}

   <button onClick={this.dltHandler.bind(this, index)}>Delete</button>

---

如果您注意到，我们正在设置一个函数，同时将其声明为

onClick

。这个函数正在执行

dltHandler

当您像这样定义

onClick

时，它在实例化时调用该函数。您需要使用

bind

或定义匿名函数：

onClick={() => this.dltHandler(index)}

   <button onClick={this.dltHandler.bind(this, index)}>Delete</button>

删除

或

this.dltHandler（index）}>Delete

这两个函数都将函数传递给

onClick

处理程序，但它们在触发

onClick

之前不会执行。请注意，这样做将导致在每次渲染调用时生成一个新函数。如果经常进行渲染，这在计算上可能会很昂贵

如果性能成为一个问题，最好将按钮重构为一个单独的组件，该组件具有定义的

dltHandler

功能