为什么我的onClick被调用渲染? - React.js

时间:2015-12-11 14:42:43

标签: javascript reactjs redux

我有一个我创建的组件:

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中的每个playlist都会调用map。如果我bind activatePlaylist喜欢:

activatePlaylist.bind(this, playlist.playlist_id)

我也可以使用匿名函数:

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

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

5 个答案:

答案 0 :(得分:140)

您需要传递给onClick 引用才能运行,当您这样做activatePlaylist( .. )时,您调用函数并传递给onClick返回的值activatePlaylist 1}}。您可以使用以下三个选项之一:

<强> 1 即可。使用.bind

activatePlaylist.bind(this, playlist.playlist_id)

<强> 2 即可。使用箭头功能

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

第3 即可。或从activatePlaylist

返回功能
activatePlaylist(playlistId) {
  return function () {
     // you code 
  }
}

答案 1 :(得分:1)

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

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

  

<强>自动绑定

     

React.createClass具有内置的魔术功能,可以自动为您绑定所有方法。对于那些在其他类中不习惯此功能的JavaScript开发人员来说,这可能会有点混乱,或者当他们从React迁移到其他类时会让人感到困惑。

     

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

答案 2 :(得分:0)

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

答案 3 :(得分:0)

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

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

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

  1. onClick = {(事件)=> {this.activatePlaylist。(playlist.playlist_id)}} 这会将一个函数附加到onClick事件,该事件仅在用户单击操作时触发。执行此代码后,将调用“ this.activatePlaylist”方法。

答案 4 :(得分:-1)

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