按钮有嵌套关系时，disabled无效

最新推荐文章于 2024-11-01 14:43:00 发布

孟秋没Bug

最新推荐文章于 2024-11-01 14:43:00 发布

阅读量348

点赞数

分类专栏： bug 修复文章标签： js css

本文链接：https://blog.youkuaiyun.com/qq_41536505/article/details/119120886

版权

bug 修复专栏收录该内容

3 篇文章

订阅专栏

在遇到按钮有嵌套关系时，尽管设置了`disabled={true}`属性，但仍然能触发页面跳转。解决方案在于为禁用的按钮添加特定的CSS样式，确保其行为被正确阻止。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：页面跳转的按钮，即使设置了disabled={true} 任然每次都能实现跳转

          <Link
            to={`${url}/create`}
            className="ml20"
          >
            <Button disabled={true} className="createBtn" icon={<PlusOutlined />}>
              Create Database
            </Button>
          </Link>

解决方法：给它设置一个disabled的样式

          <Link
            to={`${url}/create`}
            className={classNames('ml20', { disabled: noReadWritePermission })}
          >
            <Button className="createBtn" icon={<PlusOutlined />}>
              Create Database
            </Button>
          </Link>

.disabled,
[disabled],
button[disabled],
input[disabled] {
  cursor: default;
  outline: 0 none;
  opacity: 0.65;
  filter: grayscale(100%);
  filter: alpha(opacity=40);
  /* 元素永远不会成为鼠标事件的target */
  pointer-events: none;  
}