Reactjsはonclickの

Question

を働いていない私が持っている

import React from 'react'; 

export default class FilterButton extends React.Component { 
    constructor(props) { 
     super(props); 
    } 

    componentWillMount() { 

    } 

    render() { 
     return (
      <button className={'btn btn-filter btn-sm'+(this.props.active ? ' active' : '')}><span 
       className="filter-name">{this.props.name}</span><span className="filter-count">{this.props.count}</span> 
      </button> 
     ) 
    } 
} 

FilterButton.contextTypes = { 
    executeAction: React.PropTypes.func.isRequired 
}; 

export default FilterButton; 

しかし、私は私のいずれかのボタンをクリックすると、何もは全く起こりません。私は何を間違えたのですか？

Answer 1

反応性成分（例：FilterButton）に特性を与えると、この特性は成分のthis.propsになります。したがって、onClickプロパティを指定した場合は、コンポーネントのthis.props.onClickにあります。このプロパティは任意の値にすることができます。番号または機能。あなたのコードでSee here for more information.

、あなたは RightPanelの onClick方法であり、あなたの FilterButton onClickプロパティのそれぞれを提供している（引数で RightPanelに結合しています）。 ただし、 FilterButtonコンポーネント自体はこのプロパティで何も行いません。

FilterButtonコンポーネントの実際のHTMLボタン要素がクリックされたときにこの関数を呼び出すと思われます。これを行うには、この機能を「実際の」HTMLボタンに転送する必要があります（つまり、onClickプロパティに割り当ててください）。

export default class FilterButton extends React.Component { 
    constructor(props) { 
     super(props); 
    } 

    componentWillMount() { 

    } 

    render() { 
     return (
      <button onClick={this.props.onClick} className={'btn btn-filter btn-sm'+(this.props.active ? ' active' : '')}> 
      <span className="filter-name">{this.props.name}</span><span className="filter-count">{this.props.count}</span> 
      </button> 
     ) 
    } 
} 

FilterButton.contextTypes = { 
    executeAction: React.PropTypes.func.isRequired 
};