2017-12-30 11 views
0

Ich habe eine benutzerdefinierte typeahead Komponente, die ich versuche zu ändern & Ich möchte eine benutzerdefinierte onBlur Methode von Eltern zu Kind übergeben.Warum gibt der Zugriff auf die Komponentenmethode beim Aufruf von getDefaultProps() einen nicht definierten Wert zurück?

Ich habe getDefaultProps im Falle definiert onBlur wird nicht weitergegeben:

getDefaultProps: function() { 
    console.log(this.handleBlur) // undefined 
    return { 
     onChange: function() {}, 
     onBlur: this.handleBlur 
    } 
    } 

handleBlur ist ein Verfahren innerhalb der Komponente, die ich zugreifen möchten. Wie würde ich auf eine Methode innerhalb der Komponente zugreifen?

Antwort

0

Intern Reagieren Sie erhalten die Standardrequisiten, bevor die Klasse instanziiert wird. Das bedeutet, dass die Funktion getDefaultProps eine statische Methode der Klasse ist. Wenn Sie Ihre Reaktionskomponenten mit createReactClass erstellen, ist es nicht so offensichtlich, dass es eine statische Methode ist.

Es gibt verschiedene Möglichkeiten, statische Funktionen oder Variablen in JavaScript zu erstellen:

// 1. Old JS: 
function Foo() {} 
Foo.staticFunction = function(){} 
var foo = new Foo(); 
// typeof Foo.staticFunction === 'function' 
// typeof foo.staticFunction === 'undefined' 

// 2. ES6: 
class Foo { 
    static myFunction =() => { ... } 
} 

Wenn Sie ES6 verwenden Sie so etwas wie

// add the onBlur function outside of the class scope 
const handleBlur = event => { /* your fallback blur handler */ } 

class MyComponent extends Component { 
    static defaultProps = { 
     handleChange() {}, 
     handleBlur, 
    }; 
} 

Ein anderer Weg, um die blurHandler innen zu setzen wäre schreiben konnte Die Konstruktorfunktion:

class MyComponent extends Component { 
    constructor(props, context) { 
     super(props, context) 

     if (!this.props.blurHandler) { 
      this.blurHandler = this.defaultBlurHandler 
     } 
    } 
    defaultBlurHandler =() => { /* do your stuff here */ } 
} 
+0

Leider verwenden wir nicht ES6-Klasse es in unserer Codebasis. – thedeliciousmuffin

Verwandte Themen