在点击反应之前触发的onClick事件[重复]

Posted

技术标签:

【中文标题】在点击反应之前触发的onClick事件[重复]【英文标题】:onClick event fired before clicking in react [duplicate] 【发布时间】:2017-02-13 22:40:18 【问题描述】:

每当用户单击删除按钮时,我都想删除 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'));

【问题讨论】:

【参考方案1】:

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

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

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

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

如果性能成为问题,最好将按钮重构为具有已定义 dltHandler 函数的单独组件。

【讨论】:

【参考方案2】:

你正在执行函数而不是仅仅设置它,在这里:

onClick=this.dltHandler(index)

如果你想传递一些参数绑定它们。喜欢:

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

或使用箭头函数:

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

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

【讨论】:

以上是关于在点击反应之前触发的onClick事件[重复]的主要内容,如果未能解决你的问题,请参考以下文章

点击同时触发两个onclick事件[重复]

关于JS 事件冒泡和onclick,click,on()事件触发顺序

解决重复点击onClick事件,多次触发问题

反应 onClick 事件处理程序没有触发......?

用JS添加的DIV,无法触发onclick事件 请求帮助

检查 onclick 事件触发的表单元素