在点击反应之前触发的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事件[重复]的主要内容,如果未能解决你的问题,请参考以下文章