React.js: onCliquez la fonction de l'enfant au parent

J'ai utilisé cet article comme un exemple (React way), mais ça ne fonctionne pas pour moi. Veuillez m'indiquer mon erreur, car je ne comprends pas ce qui ne va pas.

C'est l'erreur que je vois:

Uncaught TypeError: this.props.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!

La question est que this dans le rappel de la map ne se réfère pas au composant React, d'où this.HandleRemove est undefined .

Vous pouvez définir la valeur de this valeur explicitement en passant un deuxième argument à la map :

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

Maintenant, this dans le rappel renvoie à la même valeur que this dehors du rappel, à savoir l'instance SendDocModal .

Cela n'a rien à voir avec React, c'est juste comment fonctionne JavaScript. Voir Comment accéder au contexte correct `this` dans un rappel? Pour plus d'informations et d'autres solutions.

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> ) } }); 

Peu de changements:

Ajout de 'this' après le mappage tagList. Pour être honnête, je ne suis pas tout à fait sûr de pourquoi – peut-être un programmeur plus expérimenté peut nous le dire.

Ajout d'une clé à chaque TagItem. Ceci est recommandé et la console vous informera que vous devez le faire pour que, si l'état change, React peut suivre chaque élément en conséquence.

Le clic est transmis par les accessoires. Voir Réagir js – avoir des problèmes pour créer une liste de tâches