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()
}
Ich möchte den loopActive
Status beim Umschalten aktualisieren , aber das this
Objekt ist im Handler nicht definiert. Laut Tutorial-Dokument sollte ich mich this
auf die Komponente beziehen. Vermisse ich etwas
javascript
reactjs
this
Maximus S.
quelle
quelle
() => this.onToggleLoop
nachdem Sie die onToggleLoop-Funktion in Ihre React-Klasse verschoben haben, funktioniert dies ebenfalls.this
definiert? Ich weiß, dassthis
Javascript davon abhängt, wie die Funktion aufgerufen wird, aber was ist hier los?Es gibt verschiedene Möglichkeiten.
Eine besteht darin,
this.onToggleLoop = this.onToggleLoop.bind(this);
den Konstruktor hinzuzufügen .Ein weiterer Grund sind Pfeilfunktionen
onToggleLoop = (event) => {...}
.Und dann ist da noch etwas
onClick={this.onToggleLoop.bind(this)}
.quelle
onClick
jedem Rendering eine neue Funktion zurückgibt und es daher so aussieht, als ob ein neuer Wert für die Requisite übergeben wurde, mit demshouldComponentUpdate
inPureComponent
s herumgespielt wird .Schreiben Sie Ihre Funktion folgendermaßen:
Fettpfeilfunktionen
quelle
ReferenceError: fields are not currently supported
.Ich bin in einer Renderfunktion auf eine ähnliche Bindung gestoßen und habe den Kontext
this
folgendermaßen übergeben:Ich habe auch verwendet:
quelle
Sie sollten beachten, dass dies
this
davon abhängt, wie die Funktion aufgerufen wird, dh: Wenn eine Funktion als Methode eines Objekts aufgerufen wird,this
wird sie auf das Objekt gesetzt, für das die Methode aufgerufen wird.this
ist im JSX-Kontext als Ihr Komponentenobjekt verfügbar, sodass Sie Ihre gewünschte Methode inline alsthis
Methode aufrufen können .Wenn Sie nur einen Verweis auf Funktion / Methode übergeben, wird React diese anscheinend als unabhängige Funktion aufrufen.
quelle
onClick={this.onToggleLoop}
vorausgesetzt, Sie haben in Ihrer Komponentenklasse ein Feld (eine Eigenschaft) definiertonToggleLoop = () => /*body using 'this'*/
Wenn Sie babel verwenden, binden Sie 'this' mit dem ES7-Bindungsoperator https://babeljs.io/docs/en/babel-plugin-transform-function-bind#auto-self-binding
quelle
Wenn Sie Ihre erstellte Methode in den Lebenszyklusmethoden wie componentDidMount ... aufrufen , können Sie nur die Funktion
this.onToggleLoop = this.onToogleLoop.bind(this)
und den Fettpfeil verwendenonToggleLoop = (event) => {...}
.Der normale Ansatz der Deklaration einer Funktion im Konstruktor funktioniert nicht, da die Lebenszyklusmethoden früher aufgerufen werden.
quelle
in meinem Fall war dies die Lösung = () => {}
quelle
In meinem Fall musste ich für eine zustandslose Komponente, die den Ref mit forwardRef erhalten hat, das tun, was hier gesagt wird: https://itnext.io/reusing-the-ref-from-forwardref-with-react-hooks-4ce9df693dd
Von hier aus (onClick hat keinen Zugriff auf das Äquivalent von 'this')
Dazu (es funktioniert)
quelle