css - 如何在material-ui的禁用选项卡内启用组件行为？

Question

我正在使用 M-ui 中的选项卡，我需要添加一个开关作为选项卡。我不想让标签可点击，所以我禁用了它，但里面的开关也不起作用。

这是我的代码：

标签： cssreactjsmaterial-ui

Answer 1

似乎您无法单击disabled元素及其子元素；一种解决方法是在我们设置活动选项卡时忽略目标选项卡。

使用 上的newValue参数handleChange，我们可以检查它是否来自我们不想在单击时处于活动状态的选项卡。

const handleChange = (event, newValue) => {
  if (newValue === "4") return; // value is 4? ignore
  setValue(newValue);
};

现在单击下面的选项卡将不会被选中。但是我们不想在点击时显示波纹效果，所以我们将使用 pass trueon disableRippleprop。

<Tab
  value="4"
  disableRipple={true}
  component="span"
  label={
    <Switch
      checked={isSwitchOn}
      onChange={(e) => setSwitch(!isSwitchOn)}
      name="toggleType"
    />
  }
/>