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;

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;

但是当我点击我的一个按钮时，根本没有任何事情发生。我做错了什么？

Answer 1

为反应组件（例如svn relocate NEW_URL）提供属性时，此属性将转到组件的FilterButton成员。因此，如果您提供this.props属性，则可以在组件的onClick中找到它。该属性可以是任何值，例如数字或功能。 See here for more information.

在您的代码中，您提供的this.props.onClick FilterButton属性属于您onClick的{{1}}方法（绑定到onClick用一个参数）。但是，RightPanel组件本身不对此属性执行任何操作。

我怀疑，您希望在单击RightPanel组件的实际HTML按钮元素时调用此函数。为此，您需要将此功能转发给＆＃34; real＆＃34; HTML按钮（即将其分配给FilterButton属性）。

FilterButton

Reactjs onclick无效

1 个答案: