使用反应挂钩禁用相邻的选项卡

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

写一个函数，return 相应地禁用文本或空字符串，并根据条件

编写 {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

使用反应挂钩禁用相邻的选项卡

disabling adjacent tabs using react hooks

html

javascript

reactjs

react-hooks