material-ui - 无论如何要将 Material UI 选项卡设置为默认选择？

Question

我在我的项目中使用 Material UI 选项卡，因为我认为它适合我的网络逻辑。但是，我需要将其设置为默认未选中。我所做的是将默认状态值设置为“未定义”。它实际上作为选项卡的第一项不会被选择为默认值，但我也从控制台收到以下错误:

Material-UI:提供给 Tabs 组件的值无效。没有一个选项卡的子项与 undefined 匹配。您可以提供以下值之一:0、1、2。

有人知道如何实现我的目标并避免错误消息吗？

export default function SimpleTabs() {
  const classes = useStyles();
  const [value, setValue] = React.useState();  //I set the default value to undefinded to make the Tabs unselected as default but also getting the error message.

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

  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Tabs value={value} onChange={handleChange} aria-label="simple tabs example">
          <Tab label="Item One" {...a11yProps(0)} />
          <Tab label="Item Two" {...a11yProps(1)} />
          <Tab label="Item Three" {...a11yProps(2)} />
        </Tabs>
      </AppBar>
      <TabPanel value={value} index={0}>
        Item One
      </TabPanel>
      <TabPanel value={value} index={1}>
        Item Two
      </TabPanel>
      <TabPanel value={value} index={2}>
        Item Three
      </TabPanel>
    </div>
  );
}

Answer 1

From the docs > Prop > 值(value):

The value of the currently selected Tab. If you don't want any selected Tab, you can set this prop to false.

为此，将初始值设置为 false:

const [value, setValue] = React.useState(false);