La fonction React onClick se déclenche au 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 donné dans la page du didacticiel react), mais le bouton de ce composant déclenche la onClickfonction, lors du rendu (il ne doit pas se déclencher au moment 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: pourquoi la onClickfonction se déclenche-t-elle sur le rendu et comment la désactiver?

Parce que vous appelez cette fonction au lieu de passer la fonction à onClick, changez cette ligne en ceci:

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

=> appelé Arrow Function, qui a été introduit dans ES6, et sera pris en charge sur React 0.13.3 ou supérieur.

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

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

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

La valeur de votre onClickattribut doit être une fonction, pas un appel de fonction.

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

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

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

avec ça <a onClick={props.signOut}>Log Out</a>...! 😆

JSX est utilisé avec ReactJS car il est très similaire au HTML et il donne aux programmeurs l'impression d'utiliser le HTML alors qu'il transpile finalement dans un fichier javascript.

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

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

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

Utilisation -

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

ce qui signifie-

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

JSX évaluera les expressions JavaScript entre accolades

Dans ce cas, this.props.removeTaskFunction(todo)est invoqué et la valeur de retour est affectée àonClick

Ce que vous devez prévoir, onClickc'est une fonction. Pour ce faire, vous pouvez encapsuler 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>
        );
    }
});

J'ai eu un problème similaire, mon code était:

function RadioInput(props) {
    return (
    <div className="form-check form-check-inline">
        <input className="form-check-input" type="radio" name="inlineRadioOptions" id={props.id} onClick={props.onClick} value={props.label}></input>
        <label className="form-check-label" htmlFor={props.id}>{props.label}</label>
    </div>
    );
  }
class ScheduleType extends React.Component
{
    renderRadioInput(id,label)
    {
        id = "inlineRadio"+id;
        return(
            <RadioInput
                id = {id}
                label = {label}
                onClick = {this.props.onClick}
            />
        );

    }

Où cela devrait être

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

dans RenderRadioInput

Cela a résolu le problème pour moi.