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