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