javascript - Reactjs onclick 不工作

Question

我有:

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;

过滤按钮:

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

当向 React 组件(例如 FilterButton)提供属性时，此属性会转到组件的 this.props 成员。因此，如果您提供了一个 onClick 属性，它可以在组件的 this.props.onClick 中找到。该属性可以是任何值，例如一个数字或一个函数。 See here for more information.

在您的代码中，您为每个 FilterButton 提供了一个 onClick 属性，它是 RightPanel< 的 onClick 方法(使用参数绑定(bind)到 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
};