Pourquoi mon onClick sur le rendu? - React.js

J'ai un composant que j'ai créé:

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

Quand je render cette page, activatePlaylist est appelée pour chaque playlist dans mon map. Si je bind activatePlaylist comme:

activatePlaylist.bind(this, playlist.playlist_id)

Je peux aussi utiliser une fonction anonyme:

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

alors qu'il fonctionne comme prévu. Pourquoi est-ce arrivé?

InformationsquelleAutor jhamm | 2015-12-11

145

Vous avez besoin de la passer à onClick référence de fonction, quand vous aimez ce activatePlaylist( .. ) vous appelez la fonction et passer à onClick valeur retournée de activatePlaylist. Vous pouvez utiliser une de ces trois options:

1. à l'aide de .bind
```
activatePlaylist.bind(this, playlist.playlist_id)
```
2. à l'aide de la flèche de la fonction
```
onClick={ () => this.activatePlaylist(playlist.playlist_id) }
```
3. ou de retour de la fonction à partir de activatePlaylist
```
activatePlaylist(playlistId) {
  return function () {
     //you code 
  }
}
```
- Je ne m'en souviens pas de travail dans les versions précédentes de React de cette façon. Suis-je de rappeler tort ou a la api changé?
- Vous utilisez ES6 classes et dans ce cas, vous devez lier contexte manuellement.
- href="https://jsfiddle.net/69z2wepo/23823/" >jsfiddle.net/69z2wepo/23823
- il y a une chose que je ne comprends pas. Si vous liez le contexte avec .bind, comme vous le dites dans l'étape 1, il est nécessaire de faire l'étape 2? et si elle l'est, pourquoi? Parce que je pense que lorsque vous utilisez la flèche de la fonction, le contexte est celle qui est où la fonction a été définie, mais si nous sommes d'attacher le cadre à l'aide de .bind, le contexte est déjà attaché, non?
- Romero c'est juste trois options différentes, vous pouvez utiliser l'un d'eux
- OK! c'était ce que je pensais. Ensuite, je ne comprends ce qui ne va pas dans mon cas, parce que je suis de liaison le contexte de la méthode avec la .bind, et l'envoi de la méthode vers le bas pour un composant à l'aide d'accessoires. Puis, en le composant, Si je l'appelle comme ceci: onClick={props.myMethod(), la méthode qu'il appelle automatiquement sans rien faire, et un nombre infini de fois. Seulement fonctionne très bien si je l'appelle la méthode à l'aide de flèche plate, donc dans ce cas n'est pas nécessaire de lier le contexte avec .bind
- Il y a maintenant une section sur le site officiel de Réagir Docs site web répondu à cette question en profondeur totale: reactjs.org/docs/faq-functions.html
InformationsquelleAutor Alexander T.
1

Ce comportement a été documenté lors de Réagir annoncé la sortie de la classe de base de composants.

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

Autobinding

Réagir.createClass a une caractéristique magique qui lie toutes les méthodes pour cela automatiquement pour vous. Cela peut être un peu déroutant pour les développeurs JavaScript qui ne sont pas utilisés à cette fonction dans d'autres classes, ou il peut être source de confusion lorsqu'ils passent de Réagir à d'autres classes.

Par conséquent, nous avons décidé de ne pas avoir cette intégrés dans Réagissent de classe du modèle. Vous pouvez toujours explicitement prebind méthodes dans votre constructeur si vous le souhaitez.

InformationsquelleAutor David L. Walsh
0

Je sais que ce post est vieux de quelques années déjà, mais juste pour faire référence à la dernière Réagir tutoriel/documentation sur cette erreur (je l'ai fait aussi) de https://reactjs.org/tutorial/tutorial.html:

Note

Pour enregistrer de frappe et d'éviter la confusion comportement de cela, nous allons utiliser
la flèche en fonction de la syntaxe pour les gestionnaires d'événements, ici et plus loin:
```
class Square extends React.Component {
 render() {
   return (
     <button className="square" onClick={() => alert('click')}>
       {this.props.value}
     </button>
   );
 }
}
```
Avis comment avec onClick={() => alert('clic')}, nous passons à un
fonction que le onClick prop. Réagir auront qu'à appeler cette fonction après
un clic. Oublier () => et de l'écriture onClick={alert('clic')} est un
erreur commune, et mettrait le feu de l'alerte à chaque fois que le composant
re-rend.

InformationsquelleAutor CD VA Programmer
0

La façon dont vous transmettant la méthode de "ce.activatePlaylist(liste de lecture.playlist_id)" , qui fera appel à la méthode immédiatement. Vous devez passer la référence de la méthode à l'événement onClick. Suivez l'une de l'mentionnés ci-dessous mise en œuvre pour résoudre votre problème.
1. onClick={présent.activatePlaylist.bind(ce,liste de lecture.playlist_id)}
Ici lier la propriété est utilisée pour créer une référence de la " ce.activatePlaylist méthode' en passant 'ce' contexte et l'argument " liste de lecture.playlist_id'
1. onClick={ (événement) => { cette.activatePlaylist.(liste de lecture.playlist_id)}}
  Cela permettra d'affecter une fonction à l'événement onClick qui sera déclenché à l'utilisateur de cliquer sur l'action uniquement. Lorsque ce code exectues le " cette.activatePlaylist méthode sera appelée.
InformationsquelleAutor Shrishail Uttagi

Vous devez vous connecter pour publier un commentaire.