为什么我的 onClick 被调用渲染?-React.js

我创建了一个组件:

class Create extends Component {
constructor(props) {
super(props);
}


render() {
var playlistDOM = this.renderPlaylists(this.props.playlists);
return (
<div>
{playlistDOM}
</div>
)
}


activatePlaylist(playlistId) {
debugger;
}


renderPlaylists(playlists) {
return playlists.map(playlist => {
return <div key={playlist.playlist_id} onClick={this.activatePlaylist(playlist.playlist_id)}>{playlist.playlist_name}</div>
});
}
}


function mapStateToProps(state) {
return {
playlists: state.playlists
}
}


export default connect(mapStateToProps)(Create);

当我 render这个页面，activatePlaylist被调用为每个 playlist在我的 map。如果我 bind activatePlaylist像:

activatePlaylist.bind(this, playlist.playlist_id)

我还可以使用一个匿名函数:

onClick={() => this.activatePlaylist(playlist.playlist_id)}

那么它就像预期的那样工作。为什么会发生这种情况？

79950 次浏览
小开
最佳答案

你需要传递到 onClick 参考文献函数，当你喜欢这个 activatePlaylist( .. )时，你调用函数并传递到 activatePlaylist返回的 onClick值。您可以使用以下三种选项之一:

使用 .bind

activatePlaylist.bind(this, playlist.playlist_id)

使用箭头函数

onClick={ () => this.activatePlaylist(playlist.playlist_id) }

或从 activatePlaylist返回函数

activatePlaylist(playlistId) {
return function () {
// you code
}
}
小开

当 React 宣布发布基于类的组件时，这种行为被记录了下来。

Https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html

自动装订

CreateClass 有一个内置的神奇特性，可以为您自动将所有方法绑定到这个特性。对于不习惯在其他类中使用这个特性的 JavaScript 开发人员来说，这可能有点令人困惑，或者当他们从 React 转移到其他类时，这可能会令人困惑。

因此，我们决定不在 React 的类模型中使用这种内置方法。如果需要，仍然可以在构造函数中显式预绑定方法。

小开

我知道这篇文章已经有几年的历史了，但是仅仅是为了参考 https://reactjs.org/tutorial/tutorial.html中关于这个常见错误的最新的 React 教程/文档(我也犯了这个错误) :

注意

为了节省输入并避免这种混淆行为，我们将使用 事件处理程序的箭头函数语法如下:

class Square extends React.Component {
render() {
return (
<button className="square" onClick={() => alert('click')}>
{this.props.value}
</button>
);
}
}

注意，在 onClick = {() = > alert (‘ click’)}中，我们是如何传递一个 作为 onClick 的支持函数。 React 只会在以下情况下调用这个函数 忘记() = > 和写 onClick = { alert (‘ click’)}是一个 常见的错误，并会发出警报，每次的组件 重新渲染。

小开

传递方法 this.activatePlaylist(playlist.playlist_id)的方式将立即调用该方法。您应该将该方法的引用传递给 onClick事件。按照下面提到的实现之一来解决您的问题。

1. 
onClick={this.activatePlaylist.bind(this,playlist.playlist_id)}

这里，bind 属性通过传递 this上下文和参数 playlist.playlist_id来创建 this.activatePlaylist方法的引用

2. 
onClick={ (event) => { this.activatePlaylist.(playlist.playlist_id)}}

这将附加一个函数到 onClick 事件，该事件仅在用户单击操作时触发。执行此代码时，将调用 this.activatePlaylist方法。

小开 
import React from 'react';
import { Page ,Navbar, Popup} from 'framework7-react';


class AssignmentDashboard extends React.Component {
constructor(props) {
super(props);
this.state = {


}


    

onSelectList=(ProjectId)=>{
return(


console.log(ProjectId,"projectid")
)


}
            

render() {
       

return (
      

<li key={index} onClick={()=> this.onSelectList(item.ProjectId)}></li>
                       

)}

提交答案