[英]Why isn't the "disabled:" tailwind prefix working in my react app?
I am trying to disable a submit button on some condition but it doesn't work.我试图在某些情况下禁用提交按钮,但它不起作用。 When I inspect the element in the browser, this is what is rendered regardless of whether the condition returns true or false.
当我检查浏览器中的元素时,无论条件返回真还是假,都会呈现此元素。
Element as rendered in browser在浏览器中呈现的元素
<button type="submit" disabled="" class="bg-yellow-500 text-white mt-4 disabled:bg-yellow-300 px-3 py-2 rounded-md">Submit</button>
Code代码
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>
}
I even removed the condition and tried this...我什至删除了条件并尝试了这个......
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>
}
No matter what value I pass to the disable attribute, disabled=""
get's rendered in the HTML. I even tried to use an input with type submit instead of a button and I'm getting the same result.无论我向 disable 属性传递什么值,
disabled=""
都会在 HTML 中呈现。我什至尝试使用类型为 submit 的输入而不是按钮,但我得到了相同的结果。 I am not sure what is going on here... any help?我不确定这里发生了什么......有帮助吗?
Minimal example最小的例子
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
The button is in fact disabled, but the style for the disabled:
tailwind prefix is not applied because it is probably not enabled, since it's disabled by default.该按钮实际上已禁用,但未应用
disabled:
tailwind 前缀的样式,因为它可能未启用,因为默认情况下它是禁用的。
You can control whether
disabled
variants are enabled for a plugin in the variants section of yourtailwind.config.js
file:您可以在
tailwind.config.js
文件的变体部分控制是否为插件启用disabled
的变体:// tailwind.config.js module.exports = { //... variants: { extend: { opacity: ['disabled'], } }, }
In your case, it would probably be backgroundColor: ['disabled']
.在您的情况下,它可能是
backgroundColor: ['disabled']
。 ( Tailwind playground ) (顺风游乐场)
Here is a simple script I've done with React.useState()这是我用 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>
);
}
You did not provide enough info on how You change disable
state. I assume You miss exactly this part.您没有提供有关如何更改
disable
state 的足够信息。我认为您恰好错过了这一部分。
Here is with class states: Short description: First button changes this.state.formIsValid
, second button is being disabled.这是 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>
)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.