为什么 "disabled:" tailwind 前缀在我的 React 应用程序中不起作用？

Question

我试图在某些情况下禁用提交按钮，但它不起作用。当我在浏览器中检查元素时，无论条件 returns 是真还是假，都会呈现此内容。

在浏览器中呈现的元素

<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>
}

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

最小示例

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 prefix 的样式，因为它可能未启用，因为默认情况下 已禁用 。

You can control whether disabled variants are enabled for a plugin in the variants section of your tailwind.config.js file:
// tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
      opacity: ['disabled'],
    }
  },
}

在你的情况下，它可能是 backgroundColor: ['disabled']。 (Tailwind playground)

Answer 2

这是我用 React.useState()

完成的一个简单脚本

import React from 'react'


export default function App() {
  const [state, setState] = React.useState(false);

  return (
    <div className="App">
      <button onClick={()=>{setState(!state)}}>
        State is: {state? 'true':'false'}
      </button>
    </div>
  );
}

您没有提供足够的信息来说明您如何改变 disable 状态。我假设你错过了这部分。

这是 class 状态：简短说明：第一个按钮更改 this.state.formIsValid，第二个按钮被禁用。

import React, { Component } from 'react';

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

    render() {
        return (
          <div className="grid grid-cols-3 gap-4">
              <div className="col-span-2">
                <button onClick={()=>{this.setState({formIsVaild:!this.state.formIsVaild})}}>Change state</button>
                  <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>
        )
    }
}

为什么 "disabled:" tailwind 前缀在我的 React 应用程序中不起作用？

Why isn't the "disabled:" tailwind prefix working in my react app?

reactjs

tailwind-css