Impossible d'accéder à React instance (this) à l'intérieur du gestionnaire d'événements
J'écris un composant simple dans ES6 (avec BabelJS) et les fonctions this.setState ne fonctionnent pas.
Les erreurs typiques incluent quelque chose comme
Impossible de lire la propriété 'setState' de non définie
ou
this.setState n'est pas une fonction
Est-ce que tu sais pourquoi? Voici le code:
import React from 'react'
class SomeClass extends React.Component {
constructor(props) {
super(props)
this.state = {inputContent: 'startValue'}
}
sendContent(e) {
console.log('sending input content '+React.findDOMNode(React.refs.someref).value)
}
changeContent(e) {
this.setState({inputContent: e.target.value})
}
render() {
return (
<div>
<h4>The input form is here:</h4>
Title:
<input type="text" ref="someref" value={this.inputContent}
onChange={this.changeContent} />
<button onClick={this.sendContent}>Submit</button>
</div>
)
}
}
export default SomeClass
this.changeContent doit être lié à l'instance du composant via this.changeContent.bind(this) avant d'être passé en tant que onChange prop, sinon la variable this dans le corps de la fonction ne fera pas référence à la instance de composant mais à window. Voir Fonction :: bind .
Lorsque vous utilisez React.createClass au lieu des classes ES6, chaque méthode autre que le cycle de vie défini sur un composant est automatiquement liée à l'instance du composant. Voir Autobinding .
Sachez que la liaison d'une fonction crée une nouvelle fonction. Vous pouvez le lier directement dans le rendu, ce qui signifie qu'une nouvelle fonction sera créée à chaque rendu du composant, ou le lier dans votre constructeur, qui ne se déclenchera qu'une fois.
constructor() {
this.changeContent = this.changeContent.bind(this);
}
contre
render() {
return <input onChange={this.changeContent.bind(this)} />;
}
Les références sont définies sur l'instance du composant et non sur React.refs: vous devez remplacer React.refs.someref par this.refs.someref. Vous devrez également lier la méthode sendContent à l'occurrence du composant pour que this s'y réfère.
Morhaus est correct, mais ceci peut être résolu sans bind.
Vous pouvez utiliser une fonction de flèche avec la proposition de propriétés de la classe :
class SomeClass extends React.Component {
changeContent = (e) => {
this.setState({inputContent: e.target.value})
}
render() {
return <input type="text" onChange={this.changeContent} />;
}
}
Étant donné que la fonction arrow est déclarée dans la portée du constructeur et que les fonctions de flèche conservent this à partir de leur étendue déclarante, tout fonctionne. L'inconvénient est que ces fonctions ne seront pas sur le prototype, elles seront toutes recréées avec chaque composant. Cependant, ce n'est pas un inconvénient car bind a le même résultat.
Ce problème est l’une des premières choses que la plupart d’entre nous rencontrons lors de la transition de la syntaxe de définition de composant React.createClass() à la méthode de classe ES6 consistant à étendre React.Component.
Il est causé par les différences de contexte this dans React.createClass() vs extends React.Component.
L'utilisation de React.createClass() lie automatiquement le contexte this (valeurs) correctement, mais ce n'est pas le cas lorsque vous utilisez des classes ES6. En procédant de la manière ES6 (en étendant React.Component), le contexte this est null par défaut. Les propriétés de la classe ne se lient pas automatiquement à l'occurrence de la classe (composant) React.
Approches pour résoudre ce problème
Je connais un total de 4 approches générales.
Liez vos fonctions dans le constructeur de classe . Considéré par beaucoup comme une approche de meilleure pratique qui évite de toucher JSX du tout et ne crée pas de nouvelle fonction à chaque rendu de composant.
class SomeClass extends React.Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); } handleClick() { console.log(this); // the React Component instance } render() { return ( <button onClick={this.handleClick}></button> ); } }Liez vos fonctions en ligne . Vous pouvez toujours trouver cette approche utilisée ici et là dans certains tutoriels/articles/etc., il est donc important que vous en soyez conscient. C’est le même concept que N ° 1, mais sachez que la liaison d’une fonction crée une nouvelle fonction à chaque restitution.
class SomeClass extends React.Component { handleClick() { console.log(this); // the React Component instance } render() { return ( <button onClick={this.handleClick.bind(this)}></button> ); } }Utilisez une grosse flèche . Jusqu'à ce que la flèche fonctionne, chaque nouvelle fonction définit sa propre valeur
this. Toutefois, la fonction de flèche ne crée pas son propre contextethis. Par conséquent,thisa la signification originale de l'occurrence de composant React. Par conséquent, nous pouvons:class SomeClass extends React.Component { handleClick() { console.log(this); // the React Component instance } render() { return ( <button onClick={ () => this.handleClick() }></button> ); } }ou
class SomeClass extends React.Component { handleClick = () => { console.log(this); // the React Component instance } render() { return ( <button onClick={this.handleClick}></button> ); } }Utilisez la bibliothèque de fonctions utilitaires pour lier automatiquement vos fonctions . Il existe quelques bibliothèques d’utilitaires qui font automatiquement le travail pour vous. En voici quelques-unes parmi les plus populaires:
Autobind Decorator est un package NPM qui lie les méthodes d'une classe à l'instance correcte de
this, même lorsque les méthodes sont détachées. Le package utilise@autobindbefore avant pour lierthisà la référence correcte au contexte du composant.import autobind from 'autobind-decorator'; class SomeClass extends React.Component { @autobind handleClick() { console.log(this); // the React Component instance } render() { return ( <button onClick={this.handleClick}></button> ); } }Autobind Decorator est assez intelligent pour nous permettre de lier toutes les méthodes d'une classe de composant à la fois, comme pour l'approche n ° 1.
Class Autobind est un autre package NPM largement utilisé pour résoudre ce problème de liaison. Contrairement à Autobind Decorator, il n’utilise pas le motif de décorateur, mais utilise une fonction dans votre constructeur qui lie automatiquement les méthodes du composant à la référence correcte. de
this.import autobind from 'class-autobind'; class SomeClass extends React.Component { constructor() { autobind(this); // or if you want to bind only only select functions: // autobind(this, 'handleClick'); } handleClick() { console.log(this); // the React Component instance } render() { return ( <button onClick={this.handleClick}></button> ); } }PS: Une autre bibliothèque très similaire est React Autobind .
Recommandation
Si j'étais vous, je resterais avec l'approche n ° 1. Cependant, dès que vous aurez une tonne de liens dans le constructeur de votre classe, je vous recommanderais d'explorer l'une des bibliothèques d'aide mentionnée dans l'approche n ° 4.
Autre
Ce n'est pas lié au problème que vous avez, mais vous ne devriez pas abuser des références .
Votre première tendance peut être d’utiliser des références pour "faire avancer les choses" dans votre application. Si tel est le cas, prenez un moment et réfléchissez de manière plus critique sur l'endroit où l'État devrait appartenir à la hiérarchie des composants.
Comme pour celui dont vous avez besoin, utilisez un composant contrôlé est la méthode recommandée. Je vous suggère d’envisager d’utiliser votre Composant state . Ainsi, vous pouvez simplement accéder à la valeur comme ceci: this.state.inputContent.
Bien que les réponses précédentes fournissent l’aperçu de base des solutions (par exemple, reliure, fonctions de flèche, décorateurs qui le font pour vous), je n’ai pas encore trouvé de réponse qui explique réellement pourquoi cela est nécessaire - ce qui, à mon avis, est la source de la confusion et conduit à des étapes inutiles, telles que la reliure inutile et le suivi aveugle de ce que font les autres.
this est dynamique
Pour comprendre cette situation spécifique, une brève introduction au fonctionnement de this. La chose clé ici est que this est une liaison d'exécution et dépend du contexte d'exécution actuel. D'où la raison pour laquelle il est communément appelé "contexte" - donner des informations sur le contexte d'exécution actuel, et pourquoi vous devez créer une liaison parce que vous perdez le "contexte". Mais laissez-moi illustrer le problème avec un extrait:
const foobar = {
bar: function () {
return this.foo;
},
foo: 3,
};
console.log(foobar.bar()); // 3, all is good!
Dans cet exemple, nous obtenons 3, comme prévu. Mais prenons cet exemple:
const barFunc = foobar.bar;
console.log(barFunc()); // Uh oh, undefined!
Il peut être inattendu de trouver qu'il enregistre des journaux non définis: où est passé le 3? La réponse réside dans "contexte" ou comment vous exécutez une fonction. Comparez comment nous appelons les fonctions:
// Example 1
foobar.bar();
// Example 2
const barFunc = foobar.bar;
barFunc();
Remarquez la différence. Dans le premier exemple, nous spécifions exactement où la méthode bar1 est situé sur l'objet foobar:
foobar.bar();
^^^^^^
Mais dans le second cas, nous stockons la méthode dans une nouvelle variable et utilisons cette variable pour appeler la méthode, sans indiquer explicitement où la méthode existe réellement, perdant ainsi le contexte :
barFunc(); // Which object is this function coming from?
Et c'est là que réside le problème, lorsque vous stockez une méthode dans une variable, les informations d'origine sur l'emplacement de cette méthode (le contexte dans lequel la méthode est en cours d'exécution) sont perdues. Sans ces informations, au moment de l'exécution, l'interpréteur JavaScript ne peut pas lier le correct this— sans contexte spécifique, this ne fonctionne pas comme prévu.2.
Relatif à Réagir
Voici un exemple de composant React (raccourci par souci de brièveté) souffrant du problème this:
handleClick() {
this.setState(({ clicks }) => ({ // setState is async, use callback to access previous state
clicks: clicks + 1, // increase by 1
}));
}
render() {
return (
<button onClick={this.handleClick}>{this.state.clicks}</button>
);
}
Mais pourquoi et comment la section précédente se rapporte-t-elle à cela? C'est parce qu'ils souffrent d'une abstraction du même problème. Si vous regardez comment React gère les gestionnaires d’événements :
// Edited to fit answer, React performs other checks internally
// props is the current React component's props, registrationName is the name of the event handle prop, i.e "onClick"
let listener = props[registrationName];
// Later, listener is called
Donc, quand vous faites onClick={this.handleClick}, la méthode this.handleClick est finalement affectée à la variable listener3. Mais maintenant, vous voyez que le problème se pose: puisque nous avons assigné this.handleClick à listener, nous ne précisons plus exactement d'où vient handleClick! Du point de vue de React, listener n'est qu'une fonction, qui n'est attachée à aucun objet (ou dans ce cas, l'instance de composant React). Nous avons perdu le contexte et donc l'interprète ne peut pas déduire une valeur this à utiliser inside handleClick.
Pourquoi la liaison fonctionne
Vous vous demandez peut-être, si l'interprète décide de la valeur this au moment de l'exécution, pourquoi puis-je lier le gestionnaire pour qu'il fonctionne ? En effet, vous pouvez utiliser Function#bind pour garantir la valeur this au moment de l'exécution. Ceci est fait en définissant une propriété de liaison this interne sur une fonction, ce qui lui permet de ne pas déduire this:
this.handleClick = this.handleClick.bind(this);
Lorsque cette ligne est exécutée, probablement dans le constructeur, , le this actuel est capturé (l'instance de composant React) et défini comme une liaison interne this d'une fonction entièrement nouvelle. , retourné de Function#bind. Cela garantit que lorsque this est calculé au moment de l'exécution, l'interprète n'essayera pas d'inférer quoi que ce soit, mais utilisera la valeur this fournie que vous lui avez donnée.
Pourquoi les propriétés de la fonction flèche fonctionnent
Les propriétés des classes de fonctions Arrow fonctionnent actuellement via Babel sur la base de la transpilation:
handleClick = () => { /* Can use this just fine here */ }
Devient:
constructor() {
super();
this.handleClick = () => {}
}
Et cela fonctionne car les fonctions de flèche font not lient leurs propres fonctions, mais prennent le this de leur portée englobante. Dans ce cas, le constructor's this, qui pointe vers l'instance de composant React, vous donnant ainsi la bonne this.4
1 J'utilise "méthode" pour faire référence à une fonction supposée être liée à un objet, et "fonction" pour ceux qui ne le sont pas.
2 Dans le deuxième extrait, indéfini est consigné au lieu de 3, car this est défini par défaut sur le contexte d'exécution global (window lorsqu'il n'est pas en mode strict, ou undefined) lorsqu'il ne peut pas être déterminé via un contexte spécifique. Et dans l'exemple, window.foo n'existe pas, ce qui donne un indéfini.
3 Si vous décrivez comment les événements de la file d'attente sont exécutés, invokeGuardedCallback est appelé dans le programme d'écoute.
4 C'est en fait beaucoup plus compliqué . React tente en interne d’utiliser Function#apply sur des écouteurs pour son propre usage, mais cela ne fonctionne pas. Les fonctions de flèche ne lient simplement pas this. Cela signifie que, lorsque this dans la fonction de flèche est réellement évalué, le this est résolu dans chaque environnement lexical de chaque contexte d'exécution du code actuel du module. Le contexte d'exécution qui résout finalement à avoir une liaison this est le constructeur, qui a une this pointant vers l'instance de composant React actuelle, lui permettant de fonctionner.
Ma recommandation est d'utiliser les fonctions de flèche en tant que propriétés
class SomeClass extends React.Component {
handleClick = () => {
console.log(this); // the React Component instance
}
render() {
return (
<button onClick={this.handleClick}></button>
);
}
}
et ne pas utiliser les fonctions de flèche comme
class SomeClass extends React.Component {
handleClick(){
console.log(this); // the React Component instance
}
render() {
return (
<button onClick={()=>{this.handleClick}}></button>
);
}
}
parce que la seconde approche générera une nouvelle fonction à chaque appel de rendu, cela signifie en fait une nouvelle version des accessoires, que si vous vous souciez de la performance, vous pouvez utiliser React.PureComponent ou React .Component vous pouvez remplacer shouldComponentUpdate (nextProps, nextState) et vérification superficielle lorsque les accessoires sont arrivés
Nous devons lier la fonction event au composant du constructeur comme suit,
import React from 'react'
class SomeClass extends React.Component {
constructor(props) {
super(props)
this.state = {inputContent: 'startValue'}
this.changeContent = this.changeContent.bind(this);
}
sendContent(e) {
console.log('sending input content '+React.findDOMNode(React.refs.someref).value)
}
changeContent(e) {
this.setState({inputContent: e.target.value})
}
render() {
return (
<div>
<h4>The input form is here:</h4>
Title:
<input type="text" ref="someref" value={this.inputContent}
onChange={this.changeContent} />
<button onClick={this.sendContent}>Submit</button>
</div>
)
}
}
export default SomeClass
Merci
Vous pouvez résoudre ceci en suivant ces étapes
Changer la fonction sendContent avec
sendContent(e) {
console.log('sending input content '+this.refs.someref.value)
}
Changer la fonction de rendu avec
<input type="text" ref="someref" value={this.state.inputContent}
onChange={(event)=>this.changeContent(event)} />
<button onClick={(event)=>this.sendContent(event)}>Submit</button>
Nous devons bind notre fonction avec this pour obtenir une instance de la fonction dans la classe. Comme si dans l'exemple
<button onClick={this.sendContent.bind(this)}>Submit</button>
De cette façon, this.state sera un objet valide.
Vous pouvez y remédier de trois manières
1. Reliez la fonction événement dans le constructeur lui-même comme suit
import React from 'react'
class SomeClass extends React.Component {
constructor(props) {
super(props)
this.state = {inputContent: 'startValue'}
this.changeContent = this.changeContent.bind(this);
}
sendContent(e) {
console.log('sending input content '+React.findDOMNode(React.refs.someref).value)
}
changeContent(e) {
this.setState({inputContent: e.target.value})
}
render() {
return (
<div>
<h4>The input form is here:</h4>
Title:
<input type="text" ref="someref" value={this.inputContent}
onChange={this.changeContent} />
<button onClick={this.sendContent}>Submit</button>
</div>
)
}
}
export default SomeClass
2.Le prénom quand il s'appelle
import React from 'react'
class SomeClass extends React.Component {
constructor(props) {
super(props)
this.state = {inputContent: 'startValue'}
}
sendContent(e) {
console.log('sending input content '+React.findDOMNode(React.refs.someref).value)
}
changeContent(e) {
this.setState({inputContent: e.target.value})
}
render() {
return (
<div>
<h4>The input form is here:</h4>
Title:
<input type="text" ref="someref" value={this.inputContent}
onChange={this.changeContent} />
<button onClick={this.sendContent.bind(this)}>Submit</button>
</div>
)
}
}
export default SomeClass
3.En utilisant les fonctions de flèche
import React from 'react'
class SomeClass extends React.Component {
constructor(props) {
super(props)
this.state = {inputContent: 'startValue'}
}
sendContent(e) {
console.log('sending input content '+React.findDOMNode(React.refs.someref).value)
}
changeContent(e) {
this.setState({inputContent: e.target.value})
}
render() {
return (
<div>
<h4>The input form is here:</h4>
Title:
<input type="text" ref="someref" value={this.inputContent}
onChange={this.changeContent} />
<button onClick={()=>this.sendContent()}>Submit</button>
</div>
)
}
}
export default SomeClass
Vos fonctions ont besoin d'être liées pour pouvoir jouer avec l'état ou les accessoires dans les gestionnaires d'événements
Dans ES5, liez vos fonctions de gestionnaire d'événements uniquement dans le constructeur, mais pas directement dans le rendu. Si vous faites une liaison directement dans le rendu, une nouvelle fonction est créée chaque fois que votre composant effectue un rendu et un rendu à nouveau. Donc, vous devriez toujours le lier au constructeur
this.sendContent = this.sendContent.bind(this)
Dans ES6, utilisez les fonctions de flèche
Lorsque vous utilisez les fonctions de flèche, vous n'avez pas besoin de créer de liaison et vous pouvez également éviter les problèmes liés à l'étendue.
sendContent = (event) => {
}
Solution:
- Sans liaison explicite,
bindavec le nom de la méthode, vous pouvez utiliser la syntaxe des fonctions de flèche en flèche (> {}) == qui conserve le contexte dethis.
import React from 'react'
class SomeClass extends React.Component {
constructor(props) {
super(props)
this.state = {
inputContent: 'startValue'
}
}
sendContent = (e) => {
console.log('sending input content ',this.state.inputContent);
}
changeContent = (e) => {
this.setState({inputContent: e.target.value},()=>{
console.log('STATE:',this.state);
})
}
render() {
return (
<div>
<h4>The input form is here:</h4>
Title:
<input type="text" value={this.state.inputContent}
onChange={this.changeContent} />
<button onClick={this.sendContent}>Submit</button>
</div>
)
}
}
export default SomeClass
Autres solutions:
Liez vos fonctions dans le constructeur de classe.
Liez vos fonctions dans les accolades d'échappement JSX Template {} {this.methodName.bind (this)}
Alexandre Kirszenberg a raison, mais il est également important de faire attention à l'endroit où vous mettez votre reliure. Cela fait des jours que je suis coincé dans une situation (probablement parce que je suis débutant), mais contrairement à d’autres, je connaissais le bind (que j’avais déjà appliqué) et je ne comprenais tout simplement pas pourquoi j’en avais encore. les erreurs. Il s'avère que j'ai eu le lien dans le mauvais ordre.
Une autre est peut-être aussi le fait que j'appelais la fonction dans "this.state", qui n'était pas au courant de la liaison car elle se trouvait au-dessus de la ligne de liaison,
Ci-dessous, voici ce que j’avais (Au fait, c’est ma toute première publication, mais j’ai pensé que c’était très important, car je ne trouvais pas de solution ailleurs):
constructor(props){
super(props);
productArray=//some array
this.state={
// Create an Array which will hold components to be displayed
proListing:productArray.map(product=>{return(<ProRow dele={this.this.popRow()} prodName={product.name} prodPrice={product.price}/>)})
}
this.popRow=this.popRow.bind(this);//This was the Issue, This line //should be kept above "this.state"
Vous utilisez ES6, donc les fonctions ne seront pas automatiquement liées à "ce" contexte. Vous devez lier manuellement la fonction au contexte.
constructor(props) {
super(props);
this.changeContent = this.changeContent.bind(this);
}
Si vous souhaitez conserver la syntaxe de constructeur de bind, vous pouvez utiliser le proposal-bind-operator et transformer votre code comme suit:
constructor() {
this.changeContent = ::this.changeContent;
}
Au lieu de :
constructor() {
this.changeContent = this.changeContent.bind(this);
}
beaucoup plus simple, pas besoin de bind(this) ou fatArrow.
Ce problème se produit car this.changeContent et onClick={this.sendContent} ne sont pas liés à this de l'instance du composant.
Il existe une autre solution (en plus d'utiliser bind () dans le constructeur ()), utilisez les fonctions de flèche de ES6 qui partagent la même portée lexicale du code environnant et gèrent this, afin que vous puissiez modifier votre code dans render () soit:
render() {
return (
<input type="text"
onChange={ () => this.changeContent() } />
<button onClick={ () => this.sendContent() }>Submit</button>
)
}
ce problème survient après react15.0, quel gestionnaire d'événements ne s'est pas lié automatiquement au composant. vous devez donc le lier manuellement au composant chaque fois que le gestionnaire d'événements sera appelé.
il existe plusieurs méthodes pour résoudre le problème. mais vous devez savoir quelle méthode est la meilleure et pourquoi? En général, nous vous recommandons de lier vos fonctions dans le constructeur de classe ou d'utiliser une fonction de flèche.
// method 1： use a arrow function
class ComponentA extends React.Component {
eventHandler = () => {
console.log(this)
}
render() {
return (
<ChildComponent onClick={this.eventHandler} />
);
}
// method 2: Bind your functions in the class constructor.
class ComponentA extends React.Component {
constructor(props) {
super(props);
this.eventHandler = this.eventHandler.bind(this);
}
render() {
return (
<ChildComponent onClick={this.eventHandler} />
);
}
ces deux méthodes ne créeront pas de nouvelle fonction lorsque le composant sera rendu à chaque fois. ainsi, notre ChildComponent ne sera pas renvoyé car les nouveaux accessoires de fonction changent ou risquent de générer un problème de performances.
bind(this) peut résoudre ce problème, et nous pouvons utiliser 2 méthodes supplémentaires pour y parvenir si vous n'aimez pas utiliser bind.
1) Comme d'habitude, nous pouvons utiliser bind(this) dans le constructeur. Ainsi, lorsque nous utilisons la fonction comme callback JSX, le contexte de this est la classe elle-même.
class App1 extends React.Component {
constructor(props) {
super(props);
// If we comment out the following line,
// we will get run time error said `this` is undefined.
this.changeColor = this.changeColor.bind(this);
}
changeColor(e) {
e.currentTarget.style.backgroundColor = "#00FF00";
console.log(this.props);
}
render() {
return (
<div>
<button onClick={this.changeColor}> button</button>
</div>
);
}
}
2) Si nous définissons la fonction comme attribut/champ de la classe avec la fonction flèche, nous n’avons plus besoin d’utiliser bind(this).
class App2 extends React.Component {
changeColor = e => {
e.currentTarget.style.backgroundColor = "#00FF00";
console.log(this.props);
};
render() {
return (
<div>
<button onClick={this.changeColor}> button 1</button>
</div>
);
}
}
3) Si nous utilisons la fonction de flèche comme rappel JSX, nous n'avons pas non plus besoin d'utiliser bind(this). Et plus encore, nous pouvons passer les paramètres. Ça a l'air bien, n'est-ce pas? mais son inconvénient réside dans le problème de performances. Pour plus de détails, veuillez vous reporter à ReactJS doco .
class App3 extends React.Component {
changeColor(e, colorHex) {
e.currentTarget.style.backgroundColor = colorHex;
console.log(this.props);
}
render() {
return (
<div>
<button onClick={e => this.changeColor(e, "#ff0000")}> button 1</button>
</div>
);
}
}
Et j'ai créé un Codepen pour faire la démonstration de ces extraits de code, j'espère que cela aidera.
Bonjour, si vous ne souhaitez pas que votre appel de fonction soit lié. Vous pouvez utiliser 'class-autobind' et l'importer comme ça
import autobind from 'class-autobind';
class test extends Component {
constructor(props){
super(props);
autobind(this);
}
Ne pas écrire autobind avant le super appel car cela ne fonctionnera pas