imperium2335 imperium2335 - 7 months ago 13
Javascript Question

Reactjs onclick not working

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

You need to transmit the onClick property of your FilterButton to the actual HTML element (the "real" button). The React component won't do it for you.

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