如果指定了文本颜色，则禁用按钮在 React JS 中不起作用答案

【问题标题】：Disabled button doesn't work in React JS if text color is specified如果指定了文本颜色，则禁用按钮在 React JS 中不起作用
【发布时间】：2021-05-02 23:12:17
【问题描述】：

我想指定稍后将在代码中禁用的按钮的样式（背景和文本颜色）。 button needs to look like this on render 和 like this after click

我的代码是

import React, { useState, useEffect } from "react";

import "./styles.css";

export default function App() {
  const [loading, setLoading] = useState(false);

  const handleClick = (e) => {
    e.preventDefault();
    setLoading(true);
  };
  return (
    <div className="App">
      <button disabled={loading} onClick={handleClick} className="btn">
        {" "}
        Click me
      </button>
    </div>
  );
}

和CSS

.btn {
  width: 200px;
  height: 50px;
  background-color: blue;
  /* color: white; */
}

.btn:hover {
  cursor: pointer;
}

链接到codesandbox

当我指定文本的颜色时（白色）禁用不会将颜色更改为灰色（按钮看起来没有禁用），当文本颜色未定义时，它是黑色的，点击后它是灰色的。有什么方法可以在单击之前将文本颜色定义为白色，当单击按钮时将颜色更改为灰色？因为我需要在渲染时制作蓝色背景和白色文本的按钮。感谢任何愿意帮助我的人。

【问题讨论】：

您应该指定:enabled 选择器以在按钮处于活动状态时设置颜色，或指定:disabled 选择器在禁用时用于颜色，例如，通过：w3schools.com/cssref/…
@Icepickle，非常感谢，它成功了！不敢相信我被这么简单的事情困住了）

标签： javascript css reactjs

【解决方案1】：

这大部分都可以通过 CSS 完成，但您需要在 React 组件中再添加一件事。

JS：

import React, { useState, useEffect } from "react";

import "./styles.css";

export default function App() {
  const [loading, setLoading] = useState(false);

  const handleClick = (e) => {
    e.preventDefault();
    setLoading(true);
  };
  return (
    <div className="App">
      <button disabled={loading} onClick={handleClick} className={`btn${loading ? ' disabled' : ''}`}>
        {" "}
        Click me
      </button>
    </div>
  );
}

CSS

.btn {
  width: 200px;
  height: 50px;
  background-color: blue;
  /* color: white; */
}
.btn.disabled {
  opacity: .65;
  pointer-events: none;
}
.btn:hover {
  cursor: pointer;
}
.btn:active {
  color: green; // Or whatever style you want
}

编辑：您还可以使用 :enabled 和 :disabled 伪选择器，就像上面的评论所说的那样。

【讨论】：