为什么“禁用：”顺风前缀在我的反应应用程序中不起作用？

Question

我试图在某些情况下禁用提交按钮，但它不起作用。当我在浏览器中检查元素时，无论条件返回 true 还是 false，都会呈现这个元素。

在浏览器中呈现的元素

<button type="submit" disabled="" class="bg-yellow-500 text-white mt-4 disabled:bg-yellow-300 px-3 py-2 rounded-md">Submit</button>

代码

state = {
        formIsVaild: false
    }

render() {
    <button type="submit" disabled={!this.state.formIsVaild} className="bg-yellow-500 text-white mt-4 disabled:bg-yellow-300 px-3 py-2 rounded-md">Open Discussion</button>
}

我什至删除了条件并尝试了这个......

state = {
        formIsVaild: false
    }

render() {
    <button type="submit" disabled className="bg-yellow-500 text-white mt-4 disabled:bg-yellow-300 px-3 py-2 rounded-md">Open Discussion</button>
}

无论我传递给 disable 属性的值是什么，disabled=""get 都会在 HTML 中呈现。我什至尝试使用类型为 submit 的输入而不是按钮，我得到了相同的结果。我不确定这里发生了什么......有什么帮助吗？

最小的例子

import React, { Component } from 'react';

class FormData extends Component {
    state = {
        formIsVaild: false
    }

    render() {
        return (
                <div className="grid grid-cols-3 gap-4">
                    <div className="col-span-2">
                        <form>
                            <button type="submit" disabled={!this.state.formIsVaild} className="bg-yellow-500 text-white mt-4 disabled:bg-yellow-300 px-3 py-2 rounded-md">Submit</button>
                        </form>
                    </div>
                </div>
        )
    }
}

export default FormData

Answer 1

该按钮实际上已禁用，但未应用disabled:tailwind 前缀的样式，因为它可能未启用，因为它在默认情况下处于禁用状态。

您可以disabled在tailwind.config.js文件的变体部分控制是否为插件启用变体：

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
      opacity: ['disabled'],
    }
  },
}

在您的情况下，它可能是backgroundColor: ['disabled']. （顺风游乐场）