используя значение в useState, но когда я использую его в this.state, переключение между вкладками не происходит

Question

• Я пытаюсь заставить вкладки работать компонентным способом.
• они используют значение в useState, но когда я использую его в this.state, переключение между вкладками не происходит.
• Я сослался на две нижеприведенные статьи, но все еще не помог мне https://reactjs.org/docs/hooks-intro.html https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889
• Я отладил код здесь handleChange печатает console.log ("handleChange --->");
• предоставив мой фрагмент кода и песочницу ниже.

class SimpleTabs extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      selectedButton: false,
      value: 0
    };

    // const classes = useStyles();
    // const [value, setValue] = React.useState(0);
  }

  handleChange = (event, newValue) => {
    // const classes = useStyles();
    console.log("handleChange--->");
    const [value, setValue] = React.useState(0);
    setValue(newValue);
  };

  render() {
    //const classes = useStyles();
    const { classes } = this.props;
    //  const [value, setValue] = React.useState(0);

    return (
      <div className={classes.root}>
        <AppBar position="static">
          <Tabs value={this.state.value} onChange={this.handleChange}>
            <Tab label="Item One" />
            <Tab label="Item Two" />
            <Tab label="Item Three" />
          </Tabs>
        </AppBar>
        {this.state.value === 0 && <TabContainer>Item One</TabContainer>}
        {this.state.value === 1 && <TabContainer>Item Two</TabContainer>}
        {this.state.value === 2 && <TabContainer>Item Three</TabContainer>}
      </div>
    );
  }
}

export default withStyles(styles)(SimpleTabs);

Answer 1

Вы не можете использовать хуки внутри компонентов класса, только функциональные компоненты. Вместо этого используйте this.state и this.setState.

  handleChange = (event, newValue) => {
    this.setState({
      value: newValue;
    });
  };

В качестве альтернативы, вы можете переписать ваш компонент как функциональный компонент (я пропустил выбранную кнопку, потому что я не вижу, чтобы он использовался где-либо):

const SimpleTabs = (props) => {
  const { classes } = props;
  const [value, setValue] = useState(0);

  const handleChange = useCallback((event, newValue) => {
    setValue(newValue);
  }, [])

  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Tabs value={value} onChange={handleChange}>
          <Tab label="Item One" />
          <Tab label="Item Two" />
          <Tab label="Item Three" />
        </Tabs>
      </AppBar>
      {value === 0 && <TabContainer>Item One</TabContainer>}
      {value === 1 && <TabContainer>Item Two</TabContainer>}
      {value === 2 && <TabContainer>Item Three</TabContainer>}
    </div>
  );
}