為什么我的 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>
                       
                       )}