为什么在渲染时调用我的 onClick？ - React.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 这个页面时， activatePlaylist 在我的 map 中为每个 playlist 调用。如果我 bind activatePlaylist 喜欢：

activatePlaylist.bind(this, playlist.playlist_id)

我也可以使用匿名函数：

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

然后它按预期工作。为什么会这样？

Answer 1

您需要传递给 onClick reference 才能运行，当您这样做时 activatePlaylist( .. ) 您调用函数并传递给 onClick 值return 来自 activatePlaylist。您可以使用以下三个选项之一：

1。使用 .bind

activatePlaylist.bind(this, playlist.playlist_id)

2。使用箭头函数

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

3。或 return 来自 activatePlaylist

的函数

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

Answer 2

当 React 宣布发布基于 class 的组件时记录了此行为。

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

Autobinding

React.createClass has a built-in magic feature that bound all methods to this automatically for you. This can be a little confusing for JavaScript developers that are not used to this feature in other classes, or it can be confusing when they move from React to other classes.

Therefore we decided not to have this built-in into React's class model. You can still explicitly prebind methods in your constructor if you want.

Answer 3

我知道这个 post 已经有几年了，但只是为了参考最新的 React tutorial/documentation 关于这个来自 https://reactjs.org/tutorial/tutorial.html 的常见错误（我也犯过）：

Note

To save typing and avoid the confusing behavior of this, we will use the arrow function syntax for event handlers here and further below:

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

Notice how with onClick={() => alert('click')}, we’re passing a function as the onClick prop. React will only call this function after a click. Forgetting () => and writing onClick={alert('click')} is a common mistake, and would fire the alert every time the component re-renders.

Answer 4

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

1.

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

此处绑定属性用于通过传递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>
                       
                       )}

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

Why is my onClick being called on render? - React.js

javascript

reactjs

redux