如何使用 React 完全禁用 TabPanel 组件并使文本变灰并默认为索引中的第二个选项卡

问题描述

目前我需要禁用 TabPanel 索引中的第一个选项卡并自动默认为索引中的第二个选项卡（由于第一个选项卡的组件尚未准备好，因此应自动禁用 onclick 和不可滑动）。我想默认为 Forecast 选项卡，同时完全禁用第一个 TabPanel 组件（label = Accuracy）及其子组件。我不知道如何做到这一点是新的反应，这是一些继承的代码。下面是代码的快照、它当前默认为 Accuracy 选项卡的 UI，以及它应该是什么的快照（AccuracyTab 完全禁用并变灰/没有 onclick/onchange 事件）：

import React from 'react';
import { usedispatch,useSelector } from "react-redux";
import PropTypes from 'prop-types';
import SwipeableViews from 'react-swipeable-views';
import { makeStyles,withStyles} from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';
import AccuracyTab from "../AccuracyTab/AccuracyTab";
import ForecastTab from "../ForecastTab/ForecastTab";
import ConfigurationHeader from "../ConfigurationHeader/ConfigurationHeader";
import { Toolbar} from "@material-ui/core";
import styles from "./mastHead.scss";


function TabPanel(props) {
  const { children,value,index,...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`full-width-tabpanel-${index}`}
      aria-labelledby={`full-width-tab-${index}`}
      {...other}
    >
      {value === index && (
        <Box p={3}>
          <Typography>{children}</Typography>
        </Box>
      )}
    </div>
  );
}

TabPanel.propTypes = {
  children: PropTypes.node,index: PropTypes.any.isrequired,value: PropTypes.any.isrequired,};

function a11yProps(index) {
  return {
    id: `full-width-tab-${index}`,'aria-controls': `full-width-tabpanel-${index}`,};
}

const AntTabs = withStyles({
  root: {
    minHeight: 'fit-content',},indicator: {
    backgroundColor: 'transparent',})(Tabs);

const AntTab = withStyles((theme) => ({
  root: {
    textTransform: 'none',minWidth: 30,fontWeight: theme.typography.fontWeightRegular,marginRight: 50,height: 25,minHeight: 'fit-content',fontSize: 20,padding: 0,color: '#ffffff',opacity: .5,fontFamily: [
      '"Helvetica Neue"','Arial','sans-serif','Geneva',].join(','),'&:hover': {
      color: '#ffffff',opacity: .7,'&$selected': {
      color: '#ffffff',fontWeight: theme.typography.fontWeightMedium,opacity: 1,'&:focus': {
      color: '#ffffff',opacity: 1
    },selected: {},}))((props) => <Tab disableRipple {...props} />);

const useStyles = makeStyles((theme) => ({
  root: {
    backgroundColor: theme.palette.background.paper,}));

export default function MastHead() {
  const classes = useStyles();
  const dispatch = usedispatch();
  const [value,setValue] = React.useState(0);

  // React.useEffect(() => {
  //   setSelectednodeTypes(selectednodeTypes);
  // },[lastUpdateDate]);

  const handleTabChange = (event,newValue) => {
    setValue(newValue);
  };

  const handleTabChangeIndex = (index) => {
    setValue(index);
  };

  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar className={styles.appbar} style={{paddingLeft:'0px'}}>
          <div className={styles.menu}>
          <div className={styles.topMenu}>
            <div className={styles.tabs}>
              <AntTabs value={value} onChange={handleTabChange} indicatorColor="primary" textColor="primary" variant="fullWidth" aria-label="full width tabs example">
                <AntTab label="Accuracy" {...a11yProps(0)} />
                <AntTab label="Forecast" {...a11yProps(1)} />
              </AntTabs>
            </div>
          </div>
          <ConfigurationHeader/>
        </div>
        </Toolbar>
      </AppBar>
      <SwipeableViews
        containerStyle={{
          transition: 'transform 0.35s cubic-bezier(0.15,0.3,0.25,1) 0s'
        }}
        index={value}
        onChangeIndex={handleTabChangeIndex}
      >
        <TabPanel value={value} index={0} >
          <AccuracyTab/>
        </TabPanel>
        <TabPanel value={value} index={1} className={styles.viewBackground}>
          <ForecastTab/>
        </TabPanel>
      </SwipeableViews>
    </div>
  );
}

当前快照：

它应该是什么的快照（禁止点击/滑动到准确、变灰等）：

解决方法

似乎对 Tab 组件（在本例中为 AntTab）使用 disabled 属性并设置 indicatorColor 和 textColor = "primary" 有助于禁用 Accuracy Tab，同时使用原色将其变灰（材质 UI 的默认值）用于选项卡组件）。我还将 useState 更改为 1 作为默认值，它自动默认为选项卡索引中的第二个值。现在我将它默认为第二个选项卡，并完全禁用第一个选项卡。请参阅我为实现此目的而更改的以下代码片段（基于相关代码）：

代替：

const [value,setValue] = React.useState(0);

将 useState 设置为 1（索引中的值作为默认值）：

const [value,setValue] = React.useState(1);

对于 Tab 组件（此代码中的 AntTabs），将 indicatorColor 和 textColor 道具从父 AntTabs 移动到 AntTab 子组件，并将 Accuracy AntTab 设置为禁用：

<AntTabs value={value} onChange={handleTabChange} variant="fullWidth" aria-label="full width tabs example">
  <AntTab label="Accuracy" {...a11yProps(0)} indicatorColor="primary" textColor="primary" disabled/>
  <AntTab label="Forecast" {...a11yProps(1)} indicatorColor="primary" textColor="primary"/>
</AntTabs>