Réagir passage de paramètre par événement onclick l'aide ES6 syntaxe

Comment passer des paramètres supplémentaires pour un événement onClick l'aide de l'ES6 syntaxe?

Par exemple:

handleRemove = (e) => {

}

render() {
     <button onClick={this.handleRemove}></button>
}

Je veux passer un id à la handleRemove fonction comme ceci:

<button onClick={this.handleRemove(id)}></button>

découvrez cet exemple Passage de paramètres à la flèche en fonction de réagir js

InformationsquelleAutor Cheng | 2015-12-18

reactjs

156

Rappelez-vous que dans onClick={ ... }, le ... est une expression JavaScript. Donc
```
... onClick={this.handleRemove(id)}
```
est le même que
```
var val = this.handleRemove(id);
... onClick={val}
```
En d'autres termes, vous appelez this.handleRemove(id) immédiatement, et de transmettre cette valeur à onClick, ce qui n'est pas ce que vous voulez.

Au lieu de cela, vous voulez créer un nouveau fonction avec l'un des arguments déjà préremplie; essentiellement, vous voulez les suivantes:
```
var newFn = function() {
  var args = Array.prototype.slice.call(arguments);

  //args[0] contains the event object
  this.handleRemove.apply(this, [id].concat(args));
}
... onClick={newFn}
```
Il y a une façon de l'exprimer dans l'ES5 JavaScript: Function.le prototype.bind.
```
... onClick={this.handleRemove.bind(this, id)}
```
Si vous utilisez React.createClass, Réagir lie automatiquement this pour vous sur des méthodes d'instance, et il peut se plaindre, sauf si vous la changez pour this.handleRemove.bind(null, id).

Vous pouvez également définir la fonction inline; cela est plus courte avec flèche fonctions si votre environnement ou transpiler les prend en charge:
```
... onClick={() => this.handleRemove(id)}
```
Si vous avez besoin de l'accès à l'événement, il vous suffit de le passer:
```
... onClick={(evt) => this.handleRemove(id, evt)}
```
- comment utiliser l'événement.preventDefault() avec cette.handleRemove(id,etv) à l'intérieur de onClick fonctionner de cette façon(es6).
- la peine de mentionner que la flèche de la fonction serait de provoquer un nouveau rendu de tous les temps, depuis la nouvelle fonction est créée sur chaque rendu
- Merci pour le "pass event, le long de la partie", il me permet de gagner aujourd'hui
- Quelqu'un devrait certainement écrire à propos de ce "piège" (peut-être un billet de blog)? Je voudrais écrire sur ce sujet, mais je suis en apprentissage ReactJS (et avancées de Javascript), mais cette astuce est d'une importance vitale. Donc, en tant que débutant, je n'ai this._deleteText(result.text), et quand ma table chargés, chaque ligne de la table avec un bouton supprimer tiré supprimer des appels... aïe!
- Quelque chose à noter, l'ajout de la flèche en fonction de la méthode render va créer une nouvelle fonction sur chaque nouveau rendu. Cela va fonctionner, cependant. Il est préférable de créer le nouveau lié fonction dans le constructeur et ajouter la nouvelle fonction de la méthode de rendu.
InformationsquelleAutor Michelle Tilley
31

Utiliser le la valeur de l'attribut de l'élément de bouton pour transmettre l'id, comme
```
<button onClick={this.handleRemove} value={id}>Remove</button>
```
puis dans handleRemove, la lecture de la valeur de l'événement comme:
```
handleRemove(event) {
...
 remove(event.target.value);
...
}
```
De cette façon, vous éviter de créer une nouvelle fonction (lorsque comparé à l'utilisation d'une flèche fonction) à chaque fois que ce composant est un nouveau rendu.
- Agréable et facile. Eu un problème lorsque le bouton a une icône/glyphe bien avec la valeur undefined. Utilisez simplement event.currentTarget.value au lieu de event.target.value et tout est bon.
- Content que ça vous a aidé. Dans mon exemple, j'ai supposé que le <button> n'avait pas d'enfant éléments, à l'exception de texte simple, et donc de l'événement.cible.valeur marcherait bien. Mais dans le cas où vous avez des enfants des éléments qui peuvent prendre sur les événements, on aura à faire ce que vous avez mentionné, c'est à dire définir la valeur de l'enfant et de le lire d'envoi de l'événement.currentTarget.de la valeur.
- Je trouve ça plus propre d'utiliser une simple fonction de gestion des événements. Les deux approches de la liaison ou de la création d'une fonction qui renvoie une autre fonction va créer beaucoup de déchets comme une nouvelle fonction sera créé et vieux jeté à ordures collectées sur chaque rendu .
- Je reçois Uncaught TypeError: Cannot read property 'handleRemove' of undefined. Et c'est même après avoir fait this.handleRemove = this.handleRemove.bind(this); en haut de mon constructor(props).
- découvrez cet exemple Passage de paramètres à la flèche en fonction de réagir js
InformationsquelleAutor Praym
26

De Flèche de la fonction comme ceci:
```
<button onClick={()=>{this.handleRemove(id)}}></button>
```
- Cela crée une nouvelle fonction sur chaque rendu qui n'est pas idéal pour la performance. ESLint drapeaux par défaut: github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/...
- donc, si vous deviez créer une fonction nommée en tant que propriété de l'initialiseur ou via .lier dans le constructeur et l'utiliser à la place de l'anonyme flèche fonction comme indiqué ci-dessus, il serait d'empêcher la création d'une nouvelle fonction sur chaque rendu.. et pourtant, on pourrait curry de votre 2ème cette.handleRemove(id) fonction à l'intérieur de celui-ci?
- Peluchage erreur: JSX functions should not use arrow functions react/jsx-no-bind
InformationsquelleAutor Fantasy Shao
13
```
onClick={this.handleRemove.bind(this, id)}
```
- Je ne sais pas pourquoi quelqu'un downvoted cette. Il a travaillé pour moi. Est-il considéré comme une mauvaise forme de faire de cette façon?
- Pas de l'Acir...son parfait, vous pouvez utiliser cette.
- C'est considérer inefficace merci de lire github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/...
- C'est essentiellement la même que la accepté de répondre. Et il n'est pas efficace, car il est en train de créer une nouvelle fonction sur chaque rendu. Vous devez lier vos fonctions dans le constructeur, pas dans la méthode render. Ainsi, les œuvres, mais peuvent avoir un coût élevé de performance.
- Peluchage erreur: JSX props should not use .bind() react/jsx-no-bind
InformationsquelleAutor NK Chaudhary
7

Quelque chose que personne n'a évoqué jusqu'à présent est de faire handleRemove de retour d'une fonction.

Vous pouvez faire quelque chose comme:
```
handleRemove = id => event => {
  //Do stuff with id and event
}

//render...
  return <button onClick={this.handleRemove(id)} />
```
Cependant, toutes ces solutions ont l'inconvénient de créer une nouvelle fonction sur chaque rendu. Mieux pour créer un nouveau composant pour le Bouton qui reçoit le id et la handleRemove séparément.
- Je ne sais pas pourquoi c'est upvoted, 3 fois! Cela ne se lie pas la ce.handleRemove fonction à l'événement onClick, ce qu'il exécute immédiatement lorsque le composant s'affiche, puis lier ce qu'il renvoie à l'événement onClick.
- Dans la fin, vous obtenez une fonction qui a accès à id et event et exerce les fonctions de handleRemove(). Pas sûr de ce que le problème que vous avez avec elle est? Avez-vous rencontré des problèmes de mise en oeuvre? "Quoi qu'il en retourne" est celle-ci la fonction de l'accès à id et event.
- Je vois. Ai pas compris là. Merci pour la clarification.
- alligator.io/réagir/nouvelle-moyen-pour-traiter-les événements
InformationsquelleAutor Angel Joseph Piscola

TL;DR:

N'engagent pas la fonction (ni de flèche fonctions) à l'intérieur de méthode render. Voir les recommandations officielles.

https://reactjs.org/docs/faq-functions.html

Donc, il y aura accepté de répondre et un couple de plus que des points de la même. Et il y a aussi quelques commentaires empêcher les gens d'utiliser bind dans la méthode render, et aussi pour éviter la flèche fonctions là pour la même raison (ces fonctions sera créé une fois encore et encore à chaque rendu). Mais il n'y a pas d'exemple, je suis donc en écrire un.

Fondamentalement, vous devez lier vos fonctions dans le constructeur.

class Actions extends Component {

    static propTypes = {
        entity_id: PropTypes.number,
        contact_id: PropTypes.number,
        onReplace: PropTypes.func.isRequired,
        onTransfer: PropTypes.func.isRequired
    }

    constructor() {
        super();
        this.onReplace = this.onReplace.bind(this);
        this.onTransfer = this.onTransfer.bind(this);
    }

    onReplace() {
        this.props.onReplace(this.props.entity_id, this.props.contact_id);
    }

    onTransfer() {
        this.props.onTransfer(this.props.entity_id, this.props.contact_id);
    }

    render() {
        return (
            <div className="actions">
                <button className="btn btn-circle btn-icon-only btn-default"
                    onClick={this.onReplace}
                    title="Replace">
                        <i className="fa fa-refresh"></i>
                </button>
                <button className="btn btn-circle btn-icon-only btn-default"
                    onClick={this.onTransfer}
                    title="Transfer">
                    <i className="fa fa-share"></i>
                </button>                                 
            </div>
        )
    }
}

export default Actions

Principaux axes sont:

constructeur

this.onReplace = this.onReplace.bind(this);

méthode

onReplace() {
    this.props.onReplace(this.props.entity_id, this.props.contact_id);
}

rendre

onClick={this.onReplace}

'PropTypes' is not defined. Il vous manque quelque chose.
Bien sûr @vapcguy. Vous devez l'importer: import PropTypes from 'prop-types'
Excellente réponse serait curieux de voir comment il fonctionne avec cette.setState au lieu d'accessoires. Je suis absent quelque chose sur ma fin pour fermer la boucle.

InformationsquelleAutor mayid

J'utilise le code suivant:

<Button onClick={this.onSubmit} id={item.key} value={shop.ethereum}>
    Approve
</Button>

Puis à l'intérieur de la méthode:

onSubmit = async event => {
    event.preventDefault();
    event.persist();
    console.log("Param passed => Eth addrs: ", event.target.value)
    console.log("Param passed => id: ", event.target.id)
    ...
}

Comme un résultat:

Param passé dans l'événement => Eth addrs: 0x4D86c35fdC080Ce449E89C6BC058E6cc4a4d49a6

Param passé dans l'événement => id: Mlz4OTBSwcgPLBzVZ7BQbwVjGip1

InformationsquelleAutor Riccardo Persiani

0

Je suis à l'aide de Réagir-Bootstrap. Le onSelect de déclenchement pour les listes déroulantes n'étaient pas en me permettant de passer des données. Seulement l'événement. Donc n'oubliez pas, vous pouvez simplement mettre toutes les valeurs d'attributs et de les ramasser à partir de la fonction à l'aide de javascript. Ramasser ces attributs que vous avez définis dans ce cas cible.
```
    let currentTarget = event.target;
    let currentId = currentTarget.getAttribute('data-id');
    let currentValue = currentTarget.getAttribute('data-value');
```
InformationsquelleAutor Dlaugh14

Vous devez vous connecter pour publier un commentaire.