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

标签： javascripthtmlcssreactjsredux

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