为什么我的 onClick 在渲染时被调用？- 反应.js

javascript reactjs redux

2022-08-30 04:28:31

我有一个我创建的组件：

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);

当我这个页面时，被调用在我的.如果我喜欢：renderactivatePlaylistplaylistmapbindactivatePlaylist

activatePlaylist.bind(this, playlist.playlist_id)

我也可以使用一个匿名函数：

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

然后它按预期工作。为什么会发生这种情况？

答案 1

您需要传递才能引用函数，当您这样做时，您可以调用函数并传递给从返回的值。您可以使用以下三个选项之一：onClickactivatePlaylist( .. )onClickactivatePlaylist

1.使用.bind

activatePlaylist.bind(this, playlist.playlist_id)

2.使用箭头功能

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

3.或返回函数从activatePlaylist

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

答案 2

我知道这篇文章已经有几年的历史了，但只是为了参考 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'）} 是一个常见的错误，每次组件重新呈现时都会触发警报。