関数が子に渡されたときにonClickイベントが発生しないようにします

Question

私はonClickイベントのコールバックを子要素に渡す非常に単純なReactコンポーネントを持っています。ただし、onClickイベントは発生しません。クラスは以下の通りですHamburgerMenuとHamburgerは正しくインポート/レンダリングされ、これらのコンポーネントにイベントが存在しません。

export default class AppHandler extends React.Component { 
    componentWillMount() { 
    this.state = { 
     menuOpen: false 
    }; 
    } 
    render() { 
    return (
     <div> 
     <HamburgerMenu menuOpen={this.state.menuOpen} /> 
     <div className="content"> 
      <nav> 
      <Hamburger onClick={this.onMenuChange.bind(this)} /> 
      </nav> 
     </div> 
     </div> 
    ); 
    } 
    onMenuChange() { 
    console.log('onMenuChanged'); 
    this.setState({ menuOpen: !this.menuOpen }); 
    } 
}; 

私はHamburgerコンポーネントで、私はルート要素上の別のonClickイベントを設定し、そのイベントハンドラとしてthis.props.onClickを設定した場合、それは仕事を得ることができますが、それは私がのこぎりを持っているすべてのものから、不要だように、それはそうです。

ガイダンスはありますか？ありがとうございました！あなたはES6クラスをエクスポートし、createClassを使用していないので

Answer 1

だから、これはonClickイベントが添付なっているところ理解していない私になってしまうんでした。 onClick={this.onMenuChange(this)}を設定すると、コンポーネントそのものは実際の要素ではないので、子要素Hamburgerの場合はprop.onClickと設定します。バインドを実際に動作させるには、をに設定し、Hamburgerコンポーネントのルート要素にonClick={this.props.onClick}を設定する必要があります。

Answer 2

、あなたはthisにハンドラをバインドする必要があります。

<Hamburger onClick={this.onMenuChange.bind(this)} /> 

なぜすぐにno autobinding上のドキュメントを反応させるのを参照してください：

メソッドが続きます通常のES6クラスと同じセマンティクスです。つまり、自動的にこれをインスタンスにバインドしません。 .bind（this）または矢印関数=>を明示的に使用する必要があります。

また、あなたの状態にエラーがあります。 this.setState({ menuOpen: !this.menuOpen });はthis.state.menuOpenに設定されますが、propに変異を導入していないため、ここでは変更されません：<HamburgerMenu menuOpen={this.menuOpen} />。

その行は次のようになります。

<HamburgerMenu menuOpen={this.state.menuOpen} /> 

// and you should set a default state as well 

// in AppHandler 
componentWillMount() { 
    this.state = { 
    menuOpen: this.props.menuOpen 
    }; 
} 

Answer 3

コンポーネントを使用しているときにthisをバインドする必要はありません。を<Hamburger />コンポーネントにバインドするだけで十分です。次のサンプルコードを参照してください

import React from 'react'; 
import Button from 'components/Button'; 

class App extends React.Component { 
    handleClick(e){ 
    console.log(e.target); 
    } 

    render(){ 
    return (
     <Button Text="Save" onClick={this.handleClick} /> 
    ); 
    } 
} 

//Button Component 
class Button extends React.Component { 
    clickEventHandler(e) { 
     this.props.onClick(e); 
    } 
    render(){ 
    return (
     <button onClick="this.clickEventHandler.bind(this)">{this.props.Text}</button> 
    ); 
    } 
}