Dev Faq
9
votes

Éviter les fonctions en ligne dans réagir: comment lier les fonctions avec des arguments?

J'essaie de suivre le NO-BIND règle pour réagir en utilisant le motif qu'ils ont recommandé avec les classes ES6: xxx

Cependant, lorsque j'ai besoin de passer des arguments dans _ONCLICK < / Code>, ce qui doit changer?

J'ai essayé quelque chose comme: xxx

Cependant, cela ne fonctionne pas. Ce qui doit être modifié?

1 commentaires

Je ne sais pas réagir, mais je suppose que si les arguments sont déjà liés, le gestionnaire devrait rester inchangé:

4 Réponses :

8
votes

L'appel à lier code> dans le constructeur ne doit réussir que ce code> comme un seul argument. 

import {someFunc} from 'some/path';

class Foo extends React.Component {
  constructor() {
    super();
    this._onClick = this._onClick.bind(this);
  }
  render() {
    return (
      <div onClick={this._onClick}>
        Hello!
      </div>
    );
  }
  _onClick() {
    const {
     prop1,
     prop2
    } = this.props;
    someFunc(prop1, prop2);
  }
}

0 commentaires
5
votes

Vous devez utiliser application partielle code>. Fondamentalement, vous initiez votre fonction OnClick avec les paramètres souhaités et la fonction OnClick renvoie une nouvelle fonction à appeler lorsque la DIV est cliquée lorsque le DIV est cliqué. 

import {someFunc} from 'some/path';

class Foo extends React.Component {
  render() {
    return (
      <div onClick={this._onClick(prop1, prop2)}>
        Hello!
      </div>
    );
  }
  _onClick = (a, b) => {
    return () => someFunc(a, b);
  }
}

2 commentaires

Cette solution est totalement fausse. Il empêche juste l'avertissement d'Eslint. Mais le problème de la création d'une nouvelle fonction sur chaque rendu est toujours délégué à une fonction intermédiaire. EDIT: Depuis cette fusion ( Github.com/yannickCr/eslint-plugin-react/ Problèmes / 1444 ) Cette solution n'empêche même pas l'avertissement.

C'est une très mauvaise solution en termes d'optimisation! _Cliquez ici renvoie une nouvelle fonction à chaque fois. Même si deux fonctions ont la même définition de fonction, ils échoueront au test d'égalité car deux objets distincts ne sont jamais égaux

1
votes

Pour répondre à votre question, il n'y a rien de spécial que vous devez faire pour passer des arguments à votre this._onclick code> fonction.

Le code révisé approprié sera le suivant: P> 

render() {
  return (
    <div onClick={() => this._onClick(prop1, prop2)}>
      Hello!
    </div>
  );
}

0 commentaires
1
votes

Une autre méthode consiste à utiliser l'Autobind Babel Stage 1 Autobind et à ignorer le constructeur.

p> 

import {someFunc} from 'some/path';

class Foo extends React.Component {
  _onClick = () => {
    const {
     prop1,
     prop2
    } = this.props;
    someFunc(prop1, prop2);
  }

  render() {
    return (
      <div onClick={this._onClick}>
        Hello!
      </div>
    );
  }
}

0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO