Wie kann ich die Ereignisbehandlungsroutinen einer React-Komponentenklasse korrekt binden, wenn ich von createClass in das Klassenschlüsselwort umwandle?

Question

Ich bin gerade dabei, unsere React-Komponenten auf ein Upgrade auf React 16 vorzubereiten, wobei der Kern dieses Prozesses ein Update von Komponenten ist, die mit das Schlüsselwort class verwenden.

Ich habe Probleme, wenn es um Event-Handler geht, die Klassenmethoden aufrufen, da ich immer den Can only update a mounted or mounting component Fehler sehe.

Ein triviales Beispiel ...

Original-Komponente React.createClass:

const Foo = React.createClass({ 
    getInitialState() { 
    return { bar: false }; 
    }, 

    onClick() { 
    this.setState({ bar: !this.state.bar }); 
    }, 

    render() { 
    return (
     <div> 
     <p>{this.state.bar ? 'YAY' : 'BOO'}</p> 
     <button onClick={this.onClick}>CLICK IT</button> 
     </div> 
    ); 
    }, 
}); 

Das wie erwartet funktioniert. Also dies tut, wenn ich bereit bin, zu ignorieren, dass ein neues Funktionsobjekt wird bei jedem Aufruf zu render erstellt werden:

class Foo extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { bar: false }; 
    } 

    render() { 
    return (
     <div> 
     <p>{this.state.bar ? 'YAY' : 'BOO'}</p> 
     <button onClick={() => { this.setState({ bar: !this.state.bar }); }}>CLICK IT</button> 
     </div> 
    ); 
    } 
} 

aber ich kann nicht den „bind im Konstruktor“ Ansatz zu arbeiten:

class Foo extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { bar: false }; 

    this.onClick = this.onClick.bind(this); 
    } 

    onClick() { 
    this.setState({ bar: !this.state.bar }); 
    } 

    render() { 
    return (
     <div> 
     <p>{this.state.bar ? 'YAY' : 'BOO'}</p> 
     <button onClick={this.onClick}>CLICK IT</button> 
     </div> 
    ); 
    } 
} 

ich kann auch nicht die Eigenschaft initializer Syntax Ansatz an der Arbeit:

class Foo extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { bar: false }; 
    } 

    onClick =() => { 
    this.setState({ bar: !this.state.bar }); 
    } 

    render() { 
    return (
     <div> 
     <p>{this.state.bar ? 'YAY' : 'BOO'}</p> 
     <button onClick={this.onClick}>CLICK IT</button> 
     </div> 
    ); 
    } 
} 

In diesen beiden Fällen, wenn ich auf die Schaltfläche klicken die zuvor genannte Fehlermeldung zeigt i up In der Browser-Konsole.

Ich hoffe, jemand hat dieses Problem bereits selbst begegnet und hat Ratschläge, wie man damit umgeht. Ich stelle mir vor, dass es nur etwas Triviales ist, dass ich komplett übersehe. :)

Vielen Dank im Voraus!

Answer 1

Werfen Sie einen Blick auf React Documentation: Sie haben das gleiche Beispiel. Übrigens funktioniert dein Bindebeispiel für mich: poste deine Fehlermeldung.

class Toggle extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {isToggleOn: true}; 

    // This binding is necessary to make `this` work in the callback 
    this.handleClick = this.handleClick.bind(this); 
    } 

    handleClick() { 
    this.setState(prevState => ({ 
     isToggleOn: !prevState.isToggleOn 
    })); 
    } 

    render() { 
     return (
     <button onClick={this.handleClick}> 
      {this.state.isToggleOn ? 'ON' : 'OFF'} 
     </button> 
    ); 
    } 
    } 

    ReactDOM.render(
    <Toggle />, 
    document.getElementById('root') 
); 

Answer 2

pshh, tun Sie es einfach und react-autobind Weise. Bindet alle Komponentenfunktionen im Konstruktor automatisch an this.

Super einfach und leicht zu bedienen:

import autoBind from 'react-autobind'; 

constructor() { 
    super(); 
    autoBind(this); 
} 

Answer 3

Waren genau dieses Problem mit nach einigem Code von einer Elektron App auf die Bahn zu portieren.

"transform-es2015-classes" ist was Sie brauchen!

npm install --save-dev babel-plugin-transform-es2015-classes

Mehr info @ der babel docs