отключение соседних вкладок с помощью реагирующих хуков - PullRequest
Новая
       16

отключение соседних вкладок с помощью реагирующих хуков

0 голосов
/ 10 июля 2019

Когда я нажимаю кнопку элемента одна на первой вкладке, она должна отключить следующие две вкладки.

Когда я нажимаю ее обратно, она должна активировать две другие вкладки.

Та же функциональность должна происходить для другихtabs.

Прямо сейчас я отключил вторую вкладку, используя свойство disabled.

Можете ли вы, ребята, сказать мне, как это исправить.Предоставляя мой фрагмент кода и песочницу ниже.

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

Ответы [ 2 ]

0 голосов
/ 10 июля 2019

Если я вас правильно понимаю, вам в основном нужна логическая переменная, поэтому щелчок по внутренним кнопкам переключит ее.

Если это так, то, как упоминалось в @charlietfl, вы не можете использовать this.setState в компоненте функции, но с помощью useState вы можете установить состояние, даже если вы используете метод (2-й аргумент), полученный из 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 });
}

Рабочий пример

0 голосов
/ 10 июля 2019

Напишите функцию, которая будет возвращать запрещенный текст или пустую строку соответственно, и напишите {this.getClass()} вместо отключенного в соответствии с условием

...