如何将React中切换全部/收藏报表的下拉框改为单个切换按钮

原有可在全部报表、收藏报表之间切换的下拉组件，需改造为二态切换按钮：

• 初始状态显示「全部报表」
• 点击后切换为「收藏报表」
• 再次点击即可返回初始状态

import React from "react";
import {
    Typography,
    makeStyles,
    createStyles,
} from "@material-ui/core";
import ReportIcon from '../../../../images/allReport.png';
import FavoriteIcon from '../../../../images/favorite.png';

const useStyles = makeStyles((theme) =>
    createStyles({
        rowAlign: {
            display: "flex",
            flexDirection: "row",
        },
        fontStyle: {
            fontFamily: "Montserrat",
        },
    })
);

const YourReportDropDown = (props) => {
    const classes = useStyles();

    const handleClick = (e) => {
        // 切换选中状态
        const nextVal = props.selectedFields === 'All' ? 'Favorites' : 'All';
        props.handleChange(e, props.filterType, nextVal);
    };

    return (
        <div
            style={{
                width: 211,
                marginLeft: props.filterType === "category" ? 45 : 0,
            }}
        >
            <div
                className={classes.rowAlign}
                style={{
                    padding: "10px",
                    justifyContent: "space-between",
                    backgroundColor: "#e3e9ff",
                    alignItems: "center",
                    borderRadius: 4,
                    cursor: "pointer",
                }}
                onClick={handleClick}
            >
                <div className={classes.rowAlign} style={{ alignItems: "center" }}>
                    <img
                        src={props.selectedFields === 'All' ? ReportIcon : FavoriteIcon}
                        style={{ width: 20, height: 20 }}
                    />
                    <Typography
                        className={classes.fontStyle}
                        style={{
                            fontSize: 18,
                            marginLeft: 13,
                            width: 123,
                            textAlign: "left",
                        }}
                        noWrap
                    >
                        {props.selectedFields === 'All' ? '全部报表' : '收藏报表'}
                    </Typography>
                </div>
            </div>
        </div>
    );
};

export default YourReportDropDown;

原SectionContainer.js无需做任何修改，原有传参、筛选逻辑可完全复用，直接替换组件文件即可生效。

内容的提问来源于stack exchange，提问作者Zafar Abbas