React tylko wiąże metody Component do tego - obejść?

Question

Czy istnieje sposób na uniknięcie płyty podstawowej podczas korzystania z ES6 z reakcją 0.14?

Do tej pory nie musiałem się martwić o moją funkcję związaną z utworzonym Component, ale to już nie jest (dlaczego?!?) Sprawa, a komponent jest ograniczony tylko do super klasy Component (jeśli Poprawnie zrozumiałem błędy).

Więc co tak naprawdę trzeba zrobić za każdym razem tworzę nowa klasa jest dodanie tego kodu do konstruktora:

class CustomComp extends React.Component { 

    constructor() { 
    super(); 
    this.newFunction = this.newFunction.bind(this); 
    } 

    newFunction(){ 
    console.log('This is user defined function'); 

} 
    render() { 
    return <button onClick={this.newFunction}>Click</button> 
    } 
} 

więc jeśli przyzwyczajenie wiążę newFunction zakończy się niepowodzeniem (nie rekwizyty, stanu lub cokolwiek).

Czy istnieje sposób obejścia tego?

Answer 1

Z React documentation:

Nie Autobinding

Metody podążać tą samą semantykę jak regularne zajęcia ES6, co oznacza, że ​​ nie automatycznie powiązać to do instancji. Będziesz musiał jawnie użyć .bind (this) lub klawiszy strzałek =>.

Tak więc, nie ma automatycznego sposobu wiązania wszystkich metod, które są nowe w wersji 0.14. Ale, jak sugeruje dokumentacja można:

1) korzystać z funkcji strzałek (Jednakże, jeśli używasz Babel, trzeba etap 0) :

class CustomComp extends React.Component { 

    constructor() { 
    super(); 
    } 

    newFunction =() => { 
    console.log('This is user defined function'); 

} 
    render() { 
    return <button onClick={this.newFunction}>Click</button> 
    } 
} 

2) można wiążą w miejscu:

class CustomComp extends React.Component { 

    constructor() { 
    super(); 
    } 

    newFunction() { 
    console.log('This is user defined function'); 

} 
    render() { 
    return <button onClick={this.newFunction.bind(this)}>Click</button> 
    } 
} 

3) można użyć ar Funkcja rząd zamiast (która jest jak wiązania):

class CustomComp extends React.Component { 

    constructor() { 
    super(); 
    } 

    newFunction() { 
    console.log('This is user defined function'); 

} 
    render() { 
    return <button onClick={() => this.newFunction()}>Click</button> 
    } 
} 

że zazwyczaj wykorzystuje się numer 2 & 3 jeśli tylko mają 1-2 metod. Numer 1 jest dobry, ale musisz zapamiętać składnię dla każdej definicji metody. Jeśli mam wiele metod, zazwyczaj wiążę w konstruktorze.