我有一个我创建的组件:
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);
当我呈现
此页面时,activatePlaylist
会为我的map
中的每个playlist
调用。如果我 bind
activatePlaylist
像:
activatePlaylist.bind(this, playlist.playlist_id)
我也可以使用匿名函数:
onClick={() => this.activatePlaylist(playlist.playlist_id)}
然后它按预期工作。为什么会这样?
最佳答案
您需要传递给 onClick
引用函数,当你这样做时activatePlaylist( .. )
你调用函数并传递给 onClick
从 activatePlaylist
返回的值.您可以使用以下三个选项之一:
1。使用 .bind
activatePlaylist.bind(this, playlist.playlist_id)
2。使用箭头函数
onClick={ () => this.activatePlaylist(playlist.playlist_id) }
3。或者从 activatePlaylist
返回函数
activatePlaylist(playlistId) {
return function () {
// you code
}
}
关于javascript - 为什么在渲染时调用我的 onClick? - react .js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34226076/