Question

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

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

其他标签应该具有相同的功能。

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

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

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

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

Answer 2

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

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

因此解决方案将是初始化变量：

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

将条件disabled属性设置到第二个和第三个标签

<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 });
}

Working example

使用react钩子禁用相邻的选项卡

2 个答案: