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

IT技术 javascript reactjs redux
2021-01-27 05:41:26

我有一个我创建的组件：

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个回答

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

1 . 使用.bind

activatePlaylist.bind(this, playlist.playlist_id)

2 . 使用箭头函数

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

3 . 或返回函数activatePlaylist

activatePlaylist(playlistId) {
  return function () {
     // you code 
  }
}
@Rafa Romero 这只是三个不同的选项，您可以使用其中之一
2021-03-18 05:41:26
@亚历山大T。有一件事我不明白。如果您将上下文与 绑定.bind，如您在第 1 步中所说的那样，是否有必要执行第 2 步？如果是，为什么？因为我认为当你使用箭头函数时，上下文就是定义函数的地方，但是如果我们使用附加上下文.bind，上下文已经附加了，对吧？
2021-04-07 05:41:26
我不记得它以React这种方式在以前的版本中工作。是我记错了还是api改了？
2021-04-08 05:41:26
@jhamm 您正在使用 ES6 类，在这种情况下，您应该手动绑定上下文。
2021-04-09 05:41:26
现在，React Docs 官方网站上有一个部分完整地回答了这个问题：reactjs.org/docs/faq-functions.html
2021-04-12 05:41:26

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

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

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

自动绑定

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

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

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

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

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

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

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

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>
                       
                       )}
你能添加一点解释而不是仅仅发布一些代码吗？它真的会提高你的答案的质量
2021-03-28 05:41:26
其它你可能感兴趣的问题
上一篇JavaScript 相当于 PHP 的 in_array() 下一篇Pdf.js：使用 base64 文件源而不是 url 呈现 pdf 文件