web-dev-qa-db-fra.com

La fonction React onClick se déclenche lors du rendu

Je passe 2 valeurs à un composant enfant: 

  1. Liste des objets à afficher 
  2. supprimer la fonction.

J'utilise une fonction .map () pour afficher ma liste d'objets (comme dans l'exemple de la page de tutoriel react), mais le bouton de ce composant déclenche la fonction onClick, lors du rendu (in ne devrait pas se déclencher à la durée du rendu). Mon code ressemble à ceci:

module.exports = React.createClass({
    render: function(){
        var taskNodes = this.props.todoTasks.map(function(todo){
            return (
                <div>
                    {todo.task}
                    <button type="submit" onClick={this.props.removeTaskFunction(todo)}>Submit</button>
                </div>
            );
        }, this);
        return (
            <div className="todo-task-list">
                {taskNodes}
            </div>
        );
    }
});

Ma question est la suivante: pourquoi ma fonction onClick déclenche-t-elle le rendu et comment y remédier?.

javascriptreactjs
124
Stralos

Puisque vous appelez cette fonction au lieu de la transmettre à onClick, changez cette ligne en ceci:

<button type="submit" onClick={() => { this.props.removeTaskFunction(todo) }}>Submit</button>

=> appelé Fonction de flèche, introduite dans ES6, sera prise en charge sur React 0.13.3 ou version ultérieure. 

336
Long Nguyen

Au lieu d'appeler la fonction, liez la valeur à la fonction:

this.props.removeTaskFunction.bind(this, todo)

MDN ref: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind

25
Pete TNT

La valeur de votre attribut onClick doit être une fonction et non un appel de fonction.

<button type="submit" onClick={function(){removeTaskFunction(todo)}}>Submit</button>
11
Brian Swisher

JSX évaluera expressions JavaScript entre accolades

Dans ce cas, this.props.removeTaskFunction(todo) est appelé et la valeur renvoyée est attribuée à onClick.

Ce que vous devez fournir pour onClick est une fonction. Pour ce faire, vous pouvez envelopper la valeur dans une fonction anonyme.

export const samepleComponent = ({todoTasks, removeTaskFunction}) => {
    const taskNodes = todoTasks.map(todo => (
                <div>
                    {todo.task}
                    <button type="submit" onClick={() => removeTaskFunction(todo)}>Submit</button>
                </div>
            );
    return (
        <div className="todo-task-list">
            {taskNodes}
        </div>
        );
    }
});
0
sudo bangbang

Pour empêcher que la fonction soit appelée uniquement lorsque le bouton est cliqué

     <button type="submit" onClick={() => this.props.removeTaskFunction(todo)}>Submit</button>

Pas besoin de crochets supplémentaires

0
Hemadri Dasari

Pour ceux qui n'utilisent pas les fonctions de flèche mais quelque chose de plus simple ... Je l'ai rencontré lors de l'ajout de parenthèses après ma fonction de signature.

remplacez <a onClick={props.signOut()}>Log Out</a>

avec ce <a onClick={props.signOut}>Log Out</a> ...! ????

0
olisteadman

JSX est utilisé avec ReactJS car il est très similaire à HTML et donne aux programmeurs le sentiment d'utiliser HTML alors qu'il transpile en un fichier javascript.

L'écriture d'une boucle for et la spécification de la fonction {this.props.removeTaskFunction (todo)} exécuteront les fonctions chaque fois que la boucle est déclenchée.

Pour arrêter ce comportement, nous devons renvoyer la fonction à onClick.

La fonction grosse flèche a une instruction caché retour avec la propriété bind . Ainsi, il retourne la fonction à OnClick car Javascript peut aussi renvoyer des fonctions !!!!!

Utilisation -

onClick={() => { this.props.removeTaskFunction(todo) }}

ce qui signifie-

var onClick = function() {
  return this.props.removeTaskFunction(todo);
}.bind(this);
0
Vishal Bisht