getDefaultProps（）からアクセスするときに、コンポーネントメソッドへのアクセスが未定義になるのはなぜですか？

Question

私は変更しようとしているカスタムtypeaheadコンポーネントを持っています&カスタムonBlurメソッドを親から子に渡したいと思います。私はケースonBlurでgetDefaultPropsを定義している

は渡されません。

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

handleBlurは、私がアクセスできるようにするコンポーネントの内部メソッドです。コンポーネント内のメソッドにはどうすればアクセスできますか？

Answer 1

内部的にReact getは、クラスがインスタンス化される前のデフォルトの小道具です。つまり、getDefaultProps関数はクラスの静的メソッドです。 createReactClassで反応コンポーネントを作成する場合は、それが静的メソッドであることは明白ではありません。もう一つの方法は、内部blurHandlerを設定することですあなたがES6を使用している場合は

// 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 =() => { ... } 
} 

あなたは

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

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

のようなものを書くことができます：

JavaScriptで静的な関数や変数を作成するためのさまざまな方法があります。コンストラクタ関数：

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

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