javascript - 选项卡显示在抽屉中，但没有发生切换

Question

• 我是材料ui的新手。
• 当您单击高级体育搜索时，会打开一个抽屉。
• 我正在尝试在抽屉中实现选项卡，但是当我单击抽屉中的两个选项卡时，它会关闭。
• 实际上它应该在选项卡之间切换。
• 它在初始页面上工作。
• 所以我调试了handleChange方法，它在初始页面和打印控制台上工作正常---> console.log("switch tabs inital page--->");
• 当我调试抽屉选项卡时，它的打印控制台但不切换选项卡---> console.log("switch tabs drager ui--->");
• 你能告诉我如何解决它。
• 在下面提供我的代码片段。

https://codesandbox.io/s/1qlpxx34v3

 handleChange = (event, value) => {
    console.log("switch tabs drager ui--->");
    this.setState({ value });
  };


  <Tabs
            value={value}
            onChange={this.handleChange}
            scrollable
            scrollButtons="on"
            indicatorColor="primary"
            textColor="primary"
          >
            <Tab label="Item One" icon={<PhoneIcon />} />
            <Tab label="Item Two" icon={<FavoriteIcon />} />

          </Tabs>

标签： javascripthtmlreactjsreduxmaterial-ui

Answer 1

On line 222 in tab-demo.js, I commented out this line:

onClick={this.toggleDrawer("right", false)}

Because with that line, every time you click inside the drawer, it will close.