React中的onClick事件在点击前被触发了。

Question

当用户点击删除按钮时，我希望能够删除该li元素。因此，我传递了索引值，但事件在我点击之前就触发了，我猜我传值的方式可能有误。

http://jsfiddle.net/axhpuepq

var App = React.createClass({
   getInitialState(){
     return {
       items:[1,2,3],
       isEdit: false
     }
   },
   renderEditForm(){
   return(
   <div>
   <input type="text" />
   <button onClick={this.saveHandler}>save</button>
   </div>
   )
   },
   ItemCtrl(index){
   return(
   <div className="itemCtrlWrap">
   <button onClick={this.editHandler}>Edit</button>
   <button onClick={this.dltHandler(index)}>Delete</button>
   </div>
   )
   },
   editHandler(){
   this.setState({isEdit:true})
   },
   saveHandler(){
    this.setState({isEdit:false})
   },
   dltHandler(index){
     console.log(index) //shall recieve index here upon click
   },
   renderItem(){
     return(
       this.state.items.map((item,i)=>
         <li key={i}> {this.state.isEdit ? this.renderEditForm() : item} {this.ItemCtrl(i)}</li>)
     )
   },
   render(){
      return(
        <ul>
          {this.renderItem()}
        </ul>
      )
   }
})

React.render(<App />, document.getElementById('container'));

- Sandy

Answer 1

你正在执行函数，而不是仅仅设置它，代码如下：

onClick={this.dltHandler(index)}

如果您想传递一些参数，请绑定它们，例如：

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

或者使用箭头函数：

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

如果您注意到了，我们在声明函数时将其设置为onClick。而这个函数只是执行dltHandler。

- sospedra

Answer 2

当你像这样定义onClick时，它会在实例化时调用该函数。你需要使用bind或定义一个匿名函数：

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

或者

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

这两个都将一个函数传递给了onClick处理程序，但它们在onClick触发之前不会执行。请注意，这样做会导致在每次呈现调用时生成一个新的函数。如果您经常进行呈现，则这可能在计算上是昂贵的。

如果性能成为问题，更好的解决方案是将按钮重构为一个单独的组件，该组件具有定义的dltHandler函数。

- erik-sn