には、ブートストラップ統合のための私のプロジェクトで、私はReactstrapを使用していますコンポーネント

Question

に反応「未定義のプロパティ 『のonClick』を読み取ることができません」。しかし、私はまた、Reactstrapと箱から出てくるButton部品のonClick動作を拡張する必要があります。そのために、私はカスタムNanoButtonコンポーネントをデフォルトのものに再構成しました。あなたが見ることができるように、私は必要

import { Component } from 'react'; 
import { Button } from 'reactstrap'; 

class NanoButton extends Component { 
    constructor(props) { 
    super(props); 
    this.onClick = this.onClick.bind(this); 
    } 
    onClick(e) { 
     var circle = document.createElement('div'); 
     e.target.appendChild(circle); 
     var d = Math.max(e.target.clientWidth, e.target.clientHeight); 
     circle.style.width = circle.style.height = d + 'px'; 
     var rect = e.target.getBoundingClientRect(); 
     circle.style.left = e.clientX - rect.left -d/2 + 'px'; 
     circle.style.top = e.clientY - rect.top - d/2 + 'px'; 
     circle.classList.add('ripple'); 

     this.props.onClick(); 
    } 
    render() { 
    return (
     <Button 
     className={this.props.className} 
     type={this.props.type} 
     color={this.props.color} 
     size={this.props.size} 
     onClick={this.onClick} 
     > 
     {this.props.children} 
     </Button> 
    ); 
    } 
} 

export default NanoButton; 

：私が言ったように、

<NanoButton type="button" onClick={() => Router.push('/about')}>About</NanoButton> 

NanoButtonコンポーネントの既存Buttonのクラスに私のカスタムonClick機能を追加します：これは私がそれを呼んでいる方法ですNanoButtonコンポーネントは、最終的には小道具として渡されonClick機能を実行する前に、いくつかのカスタムアクティビティを実行します。ブラウザにロードするときしかし、それはonClick on undefinedを読み取ることができないと言ってthis.props.onClick();で失敗しますか？私はここで何が欠けていますか？

Answer 1

あなたonClick方法は、あなたのクラスのコンテキストにバインドされ、そのためthis.propsにはアクセスできませんされていません。

通常の解決策は、あなたのコンストラクタでこのメソッドをバインドすることです：

constructor(props) { 
    super(props); 
    this.onClick = this.onClick.bind(this); 
} 

別のオプションは、それが示唆されていますようrenderメソッドにバインドすることですが、これは、結合がレンダリングごとに行われることを意味し、コンストラクタソリューションを使用して1回だけではなく、

Answer 2

あなたの方法をバインドするかしないときを忘れたい場合は、次のスタイル置き換えることができますと

onClick(e) { 

} 

を：

onClick = (e) => { 
    this.props.onClick(); 
} 

と矢印機能が自動的にあなたのためにすべてをバインドしますこれらのメソッドを定義する方法だけを変更する必要はありません。

理由は実際にonClickがonClickメソッド定義を持たないDom要素のスコープ内に定義されているためです。 thisが機能コンテキストで定義されていない場合

Answer 3

これは、発生しますので、ちょうど、このアクションをバインドする必要があることを解決するためのあなたはどちらかあなたのコンストラクタメソッドでこれをバインドすることもできますし、直接でこれを結合できることやっについてレンダリング関数でpropsとして渡されるたびに関数が呼び出されます。

コンストラクタ小道具として渡す

constructor(props){ 
super(props); 
this.onClick = this.onClick.bind(this); 
} 

に直接結合： -

<Button onClick={this.onClick.bind(this)/>