Reactjs onclick not working

Question

I have:

import React from 'react';
import FilterButton from './FilterButton';
import FilterJobsScreen from '../../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 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;

But when I click on one of my buttons nothing happens at all. What have I done wrong?

Answer 1

When providing a property to a react component (such as FilterButton), this property goes to the this.props member of the component. So if you provide an onClick property, it can be found in this.props.onClick of the component. The property can be any value, e.g. a number or a function. See here for more information.

In your code, you are providing each of your FilterButton an onClick property that is the onClick method of your RightPanel (bound to the RightPanel with an argument). However, the FilterButton component itself does not do anything with this property.

I suspect, you want this function to be called when the actual HTML button element of the FilterButton component is clicked. To do so, you need to forward this function to the "real" HTML button (i.e. assign it to its 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
};