ReactJS Material UI 在按钮单击时禁用其他选项卡答案

【问题标题】：ReactJS Material UI disable other tabs on button clickReactJS Material UI 在按钮单击时禁用其他选项卡
【发布时间】：2021-04-21 12:13:37
【问题描述】：

在每个选项卡中单击按钮组件的操作具有类似的代码

https://codesandbox.io/embed/cbn97?codemirror=1

如何在当前选项卡中单击按钮时禁用其他选项卡？

如何将“已禁用”属性传递给已显示、渲染的选项卡组件并对其进行更新？

ReactJS 新手

【问题讨论】：

我不确定我是否理解。你的意思是如果你已经在一个标签上，你应该不能再去那个标签了？你能扩展一下用例吗？
我在每个选项卡中都有一个按钮来执行操作。单击一个选项卡中的按钮后，其他选项卡应处于禁用状态，直到操作完成。我怀疑我必须使用状态。但是对 ReactJS 来说是新手，所以我想知道。
在这种情况下，加载时禁用所有选项卡权限也可以吗？只要您正在加载，您就应该无法更改选项卡，这就是要求吧？
How to create a Minimal, Reproducible Example。是的，尝试一个布尔本地组件状态来指示相应的操作已经开始，并在完成时切换它。基于此设置您的 MUI Tab disabled 道具。
@Bas van der Linden 是的，如果我单击一个选项卡上的按钮，则应该禁用所有选项卡，并且在操作完成之前我应该无法更改选项卡。谢谢您的帮助。对初学者的大力支持。

标签： reactjs material-ui

【解决方案1】：

由于您在 cmets 中指出当前页面也可能被禁用，我建议您执行以下操作：

export default function SimpleTabs() {
  const classes = useStyles();
  const [value, setValue] = React.useState(0);
  const [isLoading, setIsLoading] = React.useState(false)

  const handleOperation = () => {
    setIsLoading(true)
    // Do some synchronous operation that takes time
    setIsLoading(false)
  }
  
  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Tabs value={value} onChange={handleChange} aria-label="simple tabs example">
          <Tab label="Item One" {...a11yProps(0)} disabled={isLoading}/>
          <Tab label="Item Two" {...a11yProps(1)} disabled={isLoading}/>
          <Tab label="Item Three" {...a11yProps(2)} disabled={isLoading}/>
        </Tabs>
      </AppBar>
      <TabPanel value={value} index={0}>
        <button onClick={handleOperation}>start operation</button>
      </TabPanel>
      <TabPanel value={value} index={1}>
        Item Two
      </TabPanel>
      <TabPanel value={value} index={2}>
        Item Three
      </TabPanel>
    </div>
  );
}

所以上面的方法是创建一个isLoading 状态来标识您的选项卡按钮操作之一是否正在进行中。在您的选项卡按钮处理函数中，将isLoading 设置为true，使选项卡禁用，并在操作完成后将isLoading 设置为false。

【讨论】：

【解决方案2】：

只需将带有条件的函数结果放到标签的disabled 属性中即可：

export default function SimpleTabs() {
  const classes = useStyles();
  const [value, setValue] = React.useState(0);
  const [operationDone, setOperationDone] = React.useState(false)

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };
  
  const isDisabled = (tabIndex) => {
    if(operationDone) {
      return false;
    }
    else {
      if(value !== tabIndex) {
        return true;
      }
      return false;
    }
  }

  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Tabs value={value} onChange={handleChange} aria-label="simple tabs example">
          <Tab label="Item One" disabled={isDisabled(0)} {...a11yProps(0)} />
          <Tab label="Item Two" disabled={isDisabled(1)} {...a11yProps(1)} />
          <Tab label="Item Three" disabled={isDisabled(2)} {...a11yProps(2)} />
        </Tabs>
      </AppBar>
      <TabPanel value={value} index={0}>
        <button onClick={() => setOperationDone(true)}>change operation done</button>
      </TabPanel>
      <TabPanel value={value} index={1}>
        Item Two
      </TabPanel>
      <TabPanel value={value} index={2}>
        Item Three
      </TabPanel>
    </div>
  );
}

【讨论】：