使用 React 钩子禁用相邻选项卡

Question

当我单击第一个选项卡中的项目一个按钮时，它应该禁用接下来的两个选项卡。

当我单击它时，它应该启用其他两个选项卡。

其他选项卡也应具有相同的功能。

现在我通过使用禁用的属性禁用了第二个选项卡。

你们能告诉我如何解决它吗？在下面提供我的代码片段和沙盒。

https://codesandbox.io/s/material-demo-ulrv5

export default function SimpleTabs() {
  const classes = useStyles();
  const [value, setValue] = React.useState(0);
  function handleChange(event, newValue) {
    setValue(newValue);
  }
  function selectButton(e) {
    //const selectedButton = e.currentTarget;
    const selectedButton = e.target;
    console.log("selectedButton--->", selectedButton);
    this.setState({ selectedButton: false });
  }
  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Tabs value={value} onChange={handleChange}>
          <Tab label="Item One" />
          <Tab label="Item Two" disabled />
          <Tab label="Item Three" />
        </Tabs>
      </AppBar>
      {value === 0 && (
        <TabContainer>
          Item One
          <Button
            variant="contained"
            color="primary"
            className={classes.button}
            onClick={selectButton}
          >
            item one
          </Button>
        </TabContainer>
      )}
      {value === 1 && (
        <TabContainer>
          <Button
            variant="contained"
            color="primary"
            className={classes.button}
            onClick={selectButton}
          >
            item one
          </Button>
        </TabContainer>
      )}
      {value === 2 && (
        <TabContainer>
          <Button
            variant="contained"
            color="primary"
            className={classes.button}
            onClick={selectButton}
          >
            item one
          </Button>
        </TabContainer>
      )}
    </div>
  );
}

Answer 1

如果我理解正确，您基本上需要一个布尔变量，因此单击内部按钮将切换它。

如果是这样，就像@charlietfl提到的，您不能在函数组件中使用this.setState，但使用useState即使您使用从useState获得的方法(第二个参数(也可以设置状态。

所以解决方案是初始化变量：

const [isDisabled, disableButtons] = React.useState(true);

将条件disabled属性设置为第 2 和第 3 个选项卡

<Tab label="Item Two" disabled={isDisabled} />
<Tab label="Item Three" disabled={isDisabled} />

在selectButton()功能中，切换它

function selectButton() {
  //const selectedButton = e.currentTarget;
  disableButtons(!isDisabled);
  // this.setState({ selectedButton: false });
}

工作示例

Answer 2

编写一个函数，该函数将相应地返回禁用的文本或空字符串，并根据条件写入{this.getClass()}而不是禁用