javascript - Reactjs onclick not working -

i have:

import react 'react'; import filterbutton './filterbutton'; import filterjobsscreen '../../actions/jobs-screen/filterjobsscreen';  export default class rightpanel extends react.component {     constructor() {         super();         this.state = {             counts: {},             filters: {}         }     }      componentdidmount() {         this.load();     }      componentwillreceiveprops(newprops) {         if (newprops.counts) {             this.setstate({                 counts: newprops.counts             });         }     }      load() {         this.setstate({             counts: {                 my_jobs: 1,                 not_approved: 5             }         });     }      onclick (e) {         alert(e)         var filters_array = this.states.filters;         filters_array.push(e);         this.setstate({             filters: filters_array         })         this.context.executeaction(filterjobsscreen, this);     }      render() {         return (             <div>                 <div classname="controls">                     <span classname="title">filters</span>                     <filterbutton onclick={this.onclick.bind(this, 'my jobs')} name='my jobs' count={this.state.counts.my_jobs} active={true}/>                     <filterbutton onclick={this.onclick.bind(this, 'not approved')} name='not approved' count={this.state.counts.not_approved}/>                     <filterbutton onclick={this.onclick.bind(this, 'supply')} name='supply' count={this.state.counts.supply}/>                     <filterbutton onclick={this.onclick.bind(this, 'repair')} name='repair' count={this.state.counts.repair}/>                     <filterbutton onclick={this.onclick.bind(this, 'service exchange')} name='service exchange' count={this.state.counts.service_ex}/>                     <filterbutton onclick={this.onclick.bind(this, 'urgent')} name='urgent' count={this.state.counts.urgent}/>                     <filterbutton onclick={this.onclick.bind(this, 'today')} name='today' count={this.state.counts.today}/>                     <filterbutton onclick={this.onclick.bind(this, 'overdue')} name='overdue' count={this.state.counts.overdue}/>                 </div>                 <div classname="controls">                     <span classname="title">sorts</span>                 </div>             </div>         )     } };  rightpanel.contexttypes = {     executeaction: react.proptypes.func.isrequired };  export default rightpanel; 

filterbutton:

import react '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; 

but when click on 1 of buttons nothing happens @ all. have done wrong?

when providing property react component (such filterbutton), property goes this.props member of component. if provide onclick property, can found in this.props.onclick of component. property can value, e.g. number or function. see here more information.

in code, providing each of filterbutton onclick property onclick method of rightpanel (bound rightpanel argument). however, filterbutton component not property.

i suspect, want function called when actual html button element of filterbutton component clicked. so, need forward function "real" html button (i.e. assign onclick property).

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 };