如何访问 reactjs 中的禁用按钮并更改其 CSS？答案

【问题标题】：How to access a disabled button in reactjs and alter its CSS?如何访问 reactjs 中的禁用按钮并更改其 CSS？
【发布时间】：2019-09-12 18:24:05
【问题描述】：

我有一个这样的按钮：

<button className="button1" disabled={!this.validateForm()} type="submit" onClick={sig => this.handleCreation(sig, this.state)}>Action</button>

我想在它是disabled 时访问它的CSS，这样我就可以改变它的外观——我已经在button 类的CSS 中将其更改为默认状态。我怎么做？ CSS 的 :disabled 选择器不起作用（显然）。

【问题讨论】：

在你的 CSS 中使用 .button1:disabled 会很好地工作：codesandbox.io/s/sad-sound-efjus
我应该注意我改变了validateForm()，使它成为controlled 输入的形式，它相当简单，并且有很多关于它的教程和关于它的长文档在线。跨度>

标签： javascript css reactjs button

【解决方案1】：

既然你想改变风格。一种方式看起来像这样

<button className={isDisabled?'new-style':'old-style'} .../>

【讨论】：

isDisabled 你可以从 this.validateForm 在你的情况下得到
谢谢，这一句话解决了我的问题！太棒了！
这可行，但我（恭敬地）不同意这是一种“更好”的方式。在我看来，更好的方法是 Chris G 在他对问题的评论中建议......有两种 CSS 样式（不是两个类），首先是 .button { something }，然后是 .button:disabled { something-else }
当存在适当的伪类时，我使用伪类而不是替代类； :disabled 就是一个很好的例子。当没有伪类时，我会避免使用替代类...假设您有一个类.address 和两个类.hidden 和.showing（我见过人们这样做）-您必须删除 hidden 和添加显示。如果 both 类最终都在元素上，这意味着什么？相反，只需添加/删除 .hidden。设置简单的 .address 样式，然后使用 .address.hidden 进行修改，或者如果要广泛使用，则仅使用 .hidden { display: none; }（更多）
但是为什么要使用.hidden呢？而是问问自己为什么它被隐藏了，why 是一个更好的类名。也许你有一个.shop，当商店关门时你把它藏起来。 class="shop hidden"... 更好的是 class="shop closed" 然后你可以 display:none .shop.closed 甚至更好，当你改变主意并希望它变暗而不是隐藏时，.shop.closed 仍然有意义，而.shop.hidden 没有。您必须找到每个 .hidden 并将其更改为 .dim — 为事物的是命名类，而不是它们的外观 . （“是”可以是它是，或者是一个状态）