class PlayerControls extends React.Component {
constructor(props) {
super(props)
this.state = {
loopActive: false,
shuffleActive: false,
}
}
render() {
var shuffleClassName = this.state.toggleActive ? "player-control-icon active" : "player-control-icon"
return (
<div className="player-controls">
<FontAwesome
className="player-control-icon"
name='refresh'
onClick={this.onToggleLoop}
spin={this.state.loopActive}
/>
<FontAwesome
className={shuffleClassName}
name='random'
onClick={this.onToggleShuffle}
/>
</div>
);
}
onToggleLoop(event) {
// "this is undefined??" <--- here
this.setState({loopActive: !this.state.loopActive})
this.props.onToggleLoop()
}
Je veux mettre à jour l' loopActive
état sur bascule, mais l' this
objet n'est pas défini dans le gestionnaire. Selon la doc du tutoriel, je this
devrais me référer au composant. Est-ce que je manque quelque chose?
javascript
reactjs
this
Maximus S
la source
la source
() => this.onToggleLoop
après avoir déplacé la fonction onToggleLoop dans votre classe react, cela fonctionnera également.this
indéfini en premier lieu? Je sais quethis
Javascript dépend de la manière dont la fonction est appelée, mais que se passe-t-il ici?Il y a plusieurs façons.
La première consiste à ajouter
this.onToggleLoop = this.onToggleLoop.bind(this);
le constructeur.Un autre est les fonctions fléchées
onToggleLoop = (event) => {...}
.Et puis il y a
onClick={this.onToggleLoop.bind(this)}
.la source
onClick
renverra une nouvelle fonction à chaque rendu et donc il semble qu'une nouvelle valeur a été passée pour le prop, jouant avecshouldComponentUpdate
dansPureComponent
s.Écrivez votre fonction de cette façon:
Fonctions de la grosse flèche
la source
ReferenceError: fields are not currently supported
.J'ai rencontré une liaison similaire dans une fonction de rendu et j'ai fini par passer le contexte de
this
de la manière suivante:J'ai également utilisé:
la source
Vous devriez remarquer que cela
this
dépend de la façon dont la fonction est appelée, c'est-à-dire: lorsqu'une fonction est appelée en tant que méthode d'un objet, ellethis
est définie sur l'objet sur lequel la méthode est appelée.this
est accessible dans le contexte JSX en tant qu'objet composant, vous pouvez donc appeler la méthode souhaitée en ligne en tant quethis
méthode.Si vous passez simplement une référence à une fonction / méthode, il semble que react l'appellera en tant que fonction indépendante.
la source
onClick={this.onToggleLoop}
condition que dans votre classe de composant vous ayez défini un champ (propriété)onToggleLoop = () => /*body using 'this'*/
Si vous utilisez babel, vous liez 'this' à l'aide de l'opérateur de liaison ES7 https://babeljs.io/docs/en/babel-plugin-transform-function-bind#auto-self-binding
la source
Si vous appelez votre méthode créée dans les méthodes de cycle de vie telles que componentDidMount ..., vous ne pouvez utiliser que la fonction
this.onToggleLoop = this.onToogleLoop.bind(this)
et la fonction de la grosse flècheonToggleLoop = (event) => {...}
.L'approche normale de la déclaration d'une fonction dans le constructeur ne fonctionnera pas car les méthodes de cycle de vie sont appelées plus tôt.
la source
dans mon cas, c'était la solution = () => {}
la source
Dans mon cas, pour un composant sans état qui a reçu la référence avec forwardRef, j'ai dû faire ce qu'il est dit ici https://itnext.io/reusing-the-ref-from-forwardref-with-react-hooks-4ce9df693dd
À partir de là (onClick n'a pas accès à l'équivalent de 'this')
Pour cela (ça marche)
la source