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

Question

我有一个我创建的组件：

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这个页面时，我的map每个playlist都会调用activatePlaylist 。 如果我bind activatePlaylist如下：

activatePlaylist.bind(this, playlist.playlist_id)

我还可以使用匿名函数：

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

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

Answer 1

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

1 . 使用.bind

activatePlaylist.bind(this, playlist.playlist_id)

2 . 使用箭头函数

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

3 . 或从activatePlaylist返回函数

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

Answer 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')} 是一个常见的错误，每次组件重新渲染时都会触发警报。

Answer 3

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

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

自动绑定

React.createClass 有一个内置的魔法特性，可以自动为你绑定所有方法。 对于不习惯其他类中的此功能的 JavaScript 开发人员来说，这可能会有点混乱，或者当他们从 React 转移到其他类时可能会感到困惑。

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

Answer 4

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

1.

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

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

2.

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

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

Answer 5

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