使用反应钩子禁用相邻的选项卡答案

【问题标题】：disabling adjacent tabs using react hooks使用反应钩子禁用相邻的选项卡
【发布时间】：2019-07-10 16:38:55
【问题描述】：

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

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

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

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

你们能告诉我如何解决它。在下面提供我的代码 sn-p 和沙箱。

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

【问题讨论】：

this.setState 不存在于函数组件中...仅存在于扩展组件类中

标签： javascript html reactjs react-hooks

【解决方案1】：

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

如果是这样，就像@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

【讨论】：

嘿，但是当您单击第二个选项卡按钮时，它不会禁用第一个和第二个选项卡
我不确定我是否理解。当您单击第二个选项卡内的按钮时，它应该禁用第一个和第二个选项卡？
是的...类似地，当我们单击第一个选项卡按钮时，它应该禁用第二个和第三个选项卡
所以只需从第一个选项卡中删除 disabled 属性并将其添加到第三个选项卡上。如果每个按钮都应该禁用不同的选项卡，请指定想要的行为。

【解决方案2】：

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

【讨论】：