为什么在使用顺风 css 时反应按钮禁用不起作用

Question

     import React, { useState } from "react";
        import facebook from "../UI/icons/facebook.png";
        import Button from "../UI/Button/Button";
        import Card from "../UI/Card/Card";
        import twitter from "../UI/icons/twitter.png";
        import instagram from "../UI/icons/instagram.png";
        const Login = () => {
          const [enteredEmail, setEnteredEmail] = useState("");
          const [emailIsValid, setEmailIsValid] = useState("");
          const [enteredPassword, setEnteredPassword] = useState("");
          const [passwordIsValid, setPasswordIsValid] = useState("");
          const [formIsValid, setFormIsValid] = useState("");
        
          const emailChangeHandler = (event) => {
            setEnteredEmail(event.target.value);
        
            setFormIsValid(
              event.target.value.includes("@") && enteredPassword.trim().length > 6
            );
          };
          const passwordChangeHandler = (event) => {
            setEnteredPassword(event.target.value);
            setFormIsValid(
              event.target.value.trim().length > 6 && enteredEmail.includes("@")
            );
          };
          const validateEmailHandler = () => {
            setEmailIsValid(enteredEmail.includes("@"));
          };
        
          const validatePasswordHandler = () => {
            setPasswordIsValid(enteredPassword.trim().length > 6);
          };
          const submitHandler = (event) => {
            event.preventDefault();
            console.log(enteredEmail);
            console.log(enteredPassword);
          };
          return (
            <Card className="bg-slate-100 border-1 rounded-xl shadow-xl w-[30vw] m-auto mt-20 mb-20">
              <div className="flex justify-center text-2xl font-bold pt-4">Login</div>
              <div className="flex justify-center px-0 py-5">
                <form onSubmit={submitHandler}>
                  <div>
                    <label htmlFor="email" className="text-lg font-bold">
                      E-mail
                    </label>
                    <div>
                      <input
                        value={enteredEmail}
                        type="email"
                        id="email"
                        placeholder="Type your email"
                        className={
                          emailIsValid === false
                            ? "bg-red-200 border-b-[2px] border-red-600 text-white text-lg px-1 rounded shadow-md h-10  w-[19rem] outline-none"
                            : "border-b-[2px] text-lg px-1 rounded shadow-md border-gray-400 h-10  w-[19rem] outline-none"
                        }
                        onChange={emailChangeHandler}
                        onBlur={validateEmailHandler}
                      />
                    </div>
                  </div>
                  <div className="mt-4">
                    <label className="text-lg font-bold" htmlFor="password">
                      Password
                    </label>
                    <div>
                      <input
                        value={enteredPassword}
                        type="password"
                        id="password"
                        placeholder="Type your password"
                        className={
                          passwordIsValid === false
                            ? "bg-red-200 border-b-[2px] border-red-600 text-white text-lg px-1 rounded shadow-md h-10  w-[19rem] outline-none"
                            : "border-b-[2px] text-lg px-1 rounded shadow-md border-gray-400 h-10  w-[19rem] outline-none"
                        }
                        onChange={passwordChangeHandler}
                        onBlur={validatePasswordHandler}
                      />
                    </div>
                    <div className="flex justify-end">Forget password</div>
                  </div>

                  <div className="flex justify-center">
                       <Button
                      className="mt-4 border-gray-400 rounded-xl px-32 py-2 cursor-pointer shadow-md bg-slate-400 hover:bg-slate-600 hover:text-white"
                      type="submit"
                      disabled={!formIsValid}
                    >
                      LOGIN
                    </Button>
                  </div>

                  <div className="flex justify-center mt-4">Or Sign Up Using</div>
                  <div className="flex justify-center mt-2 ">
                    <div className="mx-1">
                      <img src={instagram} alt="facebook" width="30" />
                    </div>
                    <div className="mx-1">
                      <img src={twitter} alt="facebook" width="30" />
                    </div>
                    <div className="mx-1">
                      <img src={facebook} alt="facebook" width="30" />
                    </div>
                  </div>
                  <div className="flex justify-center mt-[9rem]">Or Sign Up Using</div>
                  <div className="flex justify-center">SIGN UP</div>
                </form>
              </div>
            </Card>
          );
        };
        
        export default Login;

这是我出错的按钮代码

<Button
                          className="mt-4 border-gray-400 rounded-xl px-32 py-2 cursor-pointer shadow-md bg-slate-400 hover:bg-slate-600 hover:text-white"
                          type="submit"
                          disabled={!formIsValid}
                        >
                          LOGIN
                        </Button>

图像这是我的代码的 output，我想在验证字段时禁用此登录按钮，但当我使用包含顺风代码的类名时它不起作用..我还有一个 piic 和代码，其中禁用工作。

 <Button
                //className="mt-4 border-gray-400 rounded-xl px-32 py-2 cursor- 
                 //pointer shadow-md bg- 
                 //slate-400 hover:bg-slate-600 hover:text-white"
                      type="submit"
                      disabled={!formIsValid}
                    >
                      LOGIN
                    </Button>

图片

现在禁用正在工作，因为我已经注释掉了 className 属性。

Answer 1

它正在工作，按钮不可点击，但样式没有改变，因为您需要选择禁用的 state 样式在使用disabled:在您的 class 中（您需要 Tailwind 版本> = v1.1.0）

一个按钮的小例子

<Button
     class="bg-green-300 disabled:bg-gray-400"
     disabled={!formIsValid}
>
  Click me
</Button>

您还需要在 tailwind.config.js 中启用禁用的变体，如下所示

module.exports = {
  variants: {
    extend: {
      backgroundColor: ["disabled"],
      textColor: ["disabled"]
  },
}

我不是反应开发人员，所以也许有人可以确认这一点，但是您还应该在适当的地方将您的useState("")更改为useState(true) ，基本上是您的所有IsValid变量，因为它们应该是布尔值而不是字符串

Answer 2

我正在努力禁用输入字段，并决定使用一种解决方法，仅使用带有帮助程序 function 的类：

export function classNames(...classes) {
  return classes.filter(Boolean).join(' ');
}

可以这样使用

import { classNames } from 'wherever/you/store/helpers';

<Button
  className={classNames(
    'font-semibold',
    formIsValid
      ? 'bg-green-300 text-green-900'
      : 'bg-gray-300 text-gray-600 cursor-not-allowed'
  )}
  disabled={!formIsValid}
>
  Click me
</Button>

这通常对于动态应用 styles 很有用，因为 Tailwind CSS 3 不支持动态 class 名称。