Vermeiden .bind in ES6 (7?) Mit Babel

Question

Ich habe dies in meinem JSX:

<Options options={options} onOptionSelect={this.onOptionSelect.bind(this)} /> 

Aber ich schwöre, ich habe einige fanciness gesehen die Notwendigkeit .bind zu negieren, wenn Methoden Rückruf durch die über zu Kind Reagieren Komponenten, habe ich Recht?

Answer 1

Sie können eine arrow function Kombination mit Property-Initialisierung verwenden.

class Component extends React.Component { 
    handleClick =() => { 
    console.log(this.props); 
    } 

    render() { 
    return <div onClick={this.handleClick} /> 
    } 
} 

Da die Pfeilfunktion wird im Rahmen des Konstruktor deklariert, und weil Pfeil Funktionen beibehalten this von ihrem erklärt Umfang, alles funktioniert. Der Nachteil ist, dass diese Funktionen nicht auf dem Prototyp funktionieren, sie werden alle mit jeder Komponente neu erstellt. Dies ist jedoch kein großer Nachteil, da bind dasselbe ergibt.

Answer 2

Sie können alle Funktionen einer Komponente binden ES2015 Klasse Syntax mit dieser autoBind Helferfunktion:

class Component extends React.Component { 
    constructor(props) { 
    super(props); 
    autoBind(this); 
    } 

    onOptionSelect() { 
    // do stuff 
    } 

    render() { 
    return <Options options={options} onOptionSelect={this.onOptionSelect} />; 
    } 
} 

function autoBind(obj) { 
    getAllMethods(obj.constructor.prototype) 
     .forEach(mtd => { 
      obj[mtd] = obj[mtd].bind(obj); 
     }); 
} 

function getAllMethods(obj) { 
    return Object.getOwnPropertyNames(obj).filter(key => typeof obj[key] == "function"); 
} 

Beachten Sie, dass Component diese Methoden nicht mit Pfeil Funktionen definiert verwenden haben.