React.js: onClick fonction de l'enfant à parent

J'ai utilisé cette article comme un exemple (Réagir), mais il ne fonctionne pas pour moi. Merci de m'indiquer mon erreur, que je ne comprends pas quel est le problème.

C'est l'erreur que je vois:

Uncaught TypeError: ce.accessoires de jeu.onClick n'est pas une fonction

Voici mon code:

//PARENT
var SendDocModal = React.createClass({
  getInitialState: function() {
    return {tagList: []};
  },
  render: function() {
    return (
      <div>
        {
          this.state.tagList.map(function(item) {
            return (
              <TagItem nameProp={item.Name} idProp={item.Id} onClick={this.HandleRemove}/>
            )
          })
        }
      </div>
    )
  },
  HandleRemove: function(c) {
    console.log('On REMOVE = ', c);
  }
});

//CHILD
var TagItem = React.createClass({
  render: function() {
    return (
      <span className="react-tagsinput-tag">
        <span>{this.props.nameProp}</span>
        <a className='react-tagsinput-remove' onClick={this.HandleRemove}></a>
      </span>
    )
  },
  HandleRemove: function() {
    this.props.onClick(this);
  }
});

Merci d'avance!

Qu'est-ce exactement ne fonctionne pas?
Oups! désolé.J'ai toujours une erreur: Uncaught TypeError: ce.accessoires de jeu.onClick n'est pas une fonction

OriginalL'auteur user2787338 | 2015-07-22

  1. 11

    Le problème est que this à l'intérieur de la map de rappel ne fait pas référence au Réagir composant, donc this.HandleRemove est undefined.

    Vous pouvez définir la this valeur explicitement par le passage d'un deuxième argument à map:

    this.state.tagList.map(function() {...}, this);

    Maintenant this à l'intérieur de le rappel se réfère à la même valeur que this à l'extérieur le rappel, à savoir la SendDocModal instance.

    Cela n'a rien à voir avec Réagir, c'est juste du fonctionnement de JavaScript. Voir Comment accéder à la corriger " ce " contexte à l'intérieur d'un rappel? pour plus d'info et d'autres solutions.

    Salut, Felix. Merci pour votre réponse. Essayé sans boucle for(juste un composant avec codé en dur accessoires) et il a très bien fonctionné. Mais je ne comprends pas comment passer le contexte dans mon cas. Pourriez-vous décrire plus en détail?
    Désolé, tout simplement confondu forEach et carte. C'est la même solution. Regarde le lien dans ma réponse pour en savoir plus sur this.
    Si j'ai bien compris je doit faire quelque chose comme ceci: code {this.state.tagList.map(function(item){ return( <TagItem nameProp={item.Name} idProp={item.Id} contextProp={this} onClick={this.HandleRemove}/> ) }, this)}, mais dans ce cas j'obtiens le même : Uncaught TypeError: ce.accessoires de jeu.contextProp.accessoires de jeu.onClick n'est pas une fonction
    Non, juste de mettre en œuvre la solution dans ma réponse. Le corps de la fonction de rappel reste le même.
    aha, maintenant je l'ai eu. le code sera: code {this.state.tagList.map(function(item){ return( <TagItem nameProp={item.Name} idProp={item.Id} onClick={this.HandleRemove}/> ) }, this)}

    OriginalL'auteur Felix Kling

  2. 1

    Essayez ce qui suit:

        var SendDocModal = React.createClass({
        getInitialState: function() {

            var item = {};
            item.Name = 'First';
            item.Id = 123;

            var item2 = {};
            item2.Name = 'Second';
            item2.Id = 123456;
            return {tagList: [item,item2]};
        },

        HandleRemove: function(c){
            console.log('On REMOVE = ', c);
        },

        render: function() {
            return (<div>
                {this.state.tagList.map(function(item){
                    return(
                            <TagItem nameProp={item.Name} idProp={item.Id} key={item.Id} click={this.HandleRemove}/>
                    )}, this)}
                    </div>
            )       
        }

    });
    //CHILD
    var TagItem = React.createClass({

        handleClick: function(nameProp)
        {
            this.props.click(nameProp);
        },


        render: function(){
            return(
                <span className="react-tagsinput-tag" ><span onClick={this.handleClick.bind(this, this.props.nameProp)}>{this.props.nameProp}</span><a className='react-tagsinput-remove' ></a></span>
            )
        }
    });

    Quelques modifications:

    Ajouté " il " après la liste mappage. Pour être honnête, je ne suis pas entièrement sûr de savoir pourquoi - peut-être plus programmeur expérimenté peut nous le dire.

    Ajout d'une clé de chaque TagItem. Il est recommandé de le et la console va vous informer que vous devriez le faire de sorte que si les modifications de l'état, de Réagir pouvez suivre chaque article en conséquence.

    Le clic est passé à travers les accessoires. Voir Réagir js - de la difficulté à créer une liste de choses à faire

    Oui, le même que Felix conseillé. un peu plus détaillée. Merci beaucoup, nous allons essayer de comprendre "ce" concept, l'air si différent de Java...
    Pas de problème. Découvrez ceci: github.com/getify/You-Dont-Know-JS/blob/master/...
    Merci! sera absolument le lire!

    OriginalL'auteur AndrewB