为什么在使用Tailwind CSS时React按钮禁用无法工作

Question

为什么在使用Tailwind CSS时React按钮禁用无法工作

3

     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>

图片这是我的代码输出，我想在验证字段时使这个登录按钮禁用，但是当我使用包含tailwind代码的className时它不起作用。我还有一个示例和代码，在那里禁用可以工作。

 <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属性，禁用功能已经生效。

- Muhammad Usman

2个回答

0

我曾经苦恼于禁用输入字段，后来决定使用一个辅助函数来绕过这个问题，只使用类。

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>

这在一般情况下对于动态应用样式非常有用，因为Tailwind CSS 3不支持动态类名。

- Larissa

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- romslf · Accepted Answer

它正在工作，但按钮无法点击，因为您需要使用 disabled: 在您的类中选择禁用状态样式，以更改样式（您需要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"]
  },
}

我不是React开发者，也许有人可以确认一下，但你应该在适当的地方将useState("")更改为useState(true)，基本上所有的IsValid变量都应该是布尔值而不是字符串, 请注意保留HTML标签。