如何在reactjs中单击按钮时更改按钮的颜色并更改反应路线路径

Question

我有3个按钮，分别是Exchange，Queue和Consumer。在“ onclick（）函数中，我想更改每个按钮的颜色。同时，我想更改其路线，以便在单击每个按钮时呈现不同的组件。

<Link className={classes.link} to="/exchange">
                        <Button
                            variant="outlined"
                            style={{
                                backgroundColor: 
this.state.bgColorExchange,
                                color: this.state.foreColorExchange
                            }}
                            className={classes.button}
                            onClick={this.onClickExchange}
                        >
                            Exchanges
                        </Button>
                    </Link>
                </Tooltip>
                <br />
                <Tooltip title="all Queues in the broker">
                    <Button
                        variant="outlined"
                        style={{
                            backgroundColor: this.state.bgColorQueue,
                            color: this.state.foreColorQueue
                        }}
                        className={classes.button}
                        onClick={this.onClickQueue}
                    >
                        <Link className={classes.link} to="/queue" />
                        Queues
                    </Button>
                </Tooltip>
                <br />

                <Tooltip title="consumers for a specific queue">
                    <Button
                        variant="outlined"
                        style={{
                            backgroundColor: this.state.bgColorConsumer,
                            color: this.state.foreColorConsumer
                        }}
                        className={classes.button}
                        onClick={this.onClickConsumer}
                    >
                        <Link className={classes.link} to="/consumer" />
                        Consumers
                    </Button>
                </Tooltip>

下面是单击每个按钮时调用的功能。

构造函数（道具）{         超级（道具）;

    this.state = {
        buttonclicked: false,

        buttonName: '',
        open: false,
        scroll: 'paper',
        bgColorExchange: '#00897b',
        bgColorQueue: '#00897b',
        bgColorConsumer: '#00897b',
        bgColorHome: '#00897b',
        foreColorExchange: 'white',
        foreColorQueue: 'white',
        foreColorConsumer: 'white',
        foreColorHome: 'white',
        redirect: false
    };
}

onClickExchange = () => {
    this.setState({
        bgColorExchange: 'white',
        foreColorExchange: 'black',
        bgColorQueue: '#00897b',
        foreColorQueue: 'white',
        bgColorConsumer: '#00897b',
        foreColorConsumer: 'white'
    });
};

onClickQueue = () => {
    this.setState({
        bgColorQueue: 'white',
        foreColorQueue: 'black',
        bgColorExchange: '#00897b',
        foreColorExchange: 'white',
        bgColorConsumer: '#00897b',
        foreColorConsumer: 'white'
    });
};

onClickConsumer = () => {
    this.setState({
        bgColorConsumer: 'white',
        foreColorConsumer: 'black',
        bgColorQueue: '#00897b',
        foreColorQueue: 'white',
        bgColorExchange: '#00897b',
        foreColorExchange: 'white'
    });
};

我尝试更改链接标签的位置（在按钮之前和之后），但是按钮的颜色更改和路线更改都不会同时发生，我希望两者都同时发生。 / p>