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

Posted 2023-03-07

【中文标题】为啥“禁用：”顺风前缀在我的反应应用程序中不起作用？

【英文标题】：Why isn't the "disabled:" tailwind prefix working in my react app?为什么“禁用：”顺风前缀在我的反应应用程序中不起作用？

【发布时间】：2021-05-20 18:10:01

【问题描述】：

我试图在某些情况下禁用提交按钮，但它不起作用。当我在浏览器中检查元素时，无论条件返回 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

【问题讨论】：

我已更新问题以包含一个简单示例

从您的示例中，formIsValid 将始终为 false，这将始终将 disabled 设置为 true。

完全正确。但按钮没有被禁用。

【参考方案1】：

该按钮实际上已禁用，但disabled: tailwind prefix 的样式未应用，因为它可能未启用，因为默认情况下它已禁用。

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

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

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

【讨论】：

关于这个的另一个答案：TailwindCSS: disabled variant not working

【参考方案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 状态。我假设你错过了这部分。

这里是类状态： 简短描述：第一个按钮更改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>
        )