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

activatePlaylist.bind(this, playlist.playlist_id)

我也可以使用匿名函数：

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

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

Answer 1

您需要传递给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 
  }
}

Answer 2

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

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

<强>自动绑定

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

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

Answer 3

我知道这篇文章已经有几年历史了，但是只是为了参考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 4

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

onClick = {this.activatePlaylist.bind（this，playlist.playlist_id）}

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

onClick = {（事件）=> {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

5 个答案: