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

Posted 2023-02-16

【中文标题】如果指定了文本颜色，则禁用按钮在 React JS 中不起作用

【英文标题】：Disabled button doesn't work in React JS if text color is specified

【发布时间】：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/cs-s-ref/…

@Icepickle，非常感谢，它成功了！不敢相信我被这么简单的事情困住了）

【参考方案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 伪选择器，就像上面的评论所说的那样。