reactjs - 如何使用tailwind css动态更改下一个js中的边框颜色？

Question

我正在尝试在有效或无效电子邮件 ID 的状态下动态更改电子邮件输入的边框颜色。我已经编写了以下方法，但它没有按预期工作，我们可以说它根本没有工作。有任何解决方法可以做到这一点。

import { useState } from 'react'; 
import Image from 'next/image';

const NavItem = props =>(
    <li>
      <a className="text-md font-bold text-gray-700 px-2 py-1 hover:bg-gray-300 rounded transition-colors duration-300" href={props.href}>{props.text}</a>
    </li>
  );

export default function Post() {
  const [validEmail,setvalidEmail] = useState(true);

  return (
      <div>
           <nav className="flex justify-between p-4" >
      <div className="">
      <Image
      src="/media/logonew.png"
      alt="logo"
      width={180}
      height={40}
      />
      </div>
      <div>
      <ul className="flex space-x-3 py-2 px-3">
      <NavItem  href="/" text="Home"/>
          <NavItem  href="/products" text="Products"/>
          <NavItem href="/eligibility" text="Eligibility"/>
          <NavItem href="/login" text="Login"/>
          <NavItem href="/faq" text="FAQ"/>
        </ul>
      </div>
        
      </nav>

      <div className="conatiner mx-auto max-w-xl mt-10">
        <div className="text-center md:flex md:text-left  shadow-sm">
            <div className="border text-center p-5 rounded-xl">
                <h2 className="text-6xl text-blue-600 m-5 font-semibold">Register</h2>
                <form onSubmit={()=>{}} className="text-left">
                    <p className="text-blue-600 font-semibold">Email</p>
                    <input type="text" placeholder="Enter your email id" className="bg-white rounded border border-gray-300 p-3 focus:border validEmail?focus:border-blue-600:border-red-600 my-2 w-full"/>
                    <p className="text-blue-600 font-semibold">Password</p>
                    <input type="password" placeholder="Enter your password" className="bg-white rounded border border-gray-300 p-3 focus:border focus:border-blue-600  my-2 w-full"/>
                    <p className="text-blue-600 font-semibold">Confirm Password</p>
                    <input type="password" placeholder="Confirm your password" className="bg-white rounded border border-gray-300 p-3 focus:border focus:border-blue-600  my-2 w-full"/>
                    <p className="text-blue-600 font-semibold">Full name</p>
                    <input type="text" placeholder="Enter your full name" className="bg-white rounded border border-gray-300 p-3 focus:border focus:border-blue-600  my-2 w-full"/>
                    <p className="text-blue-600 font-semibold">Date of birth</p>
                    <input type="date" placeholder="Enter your password" className="bg-white rounded border border-gray-300 p-3 focus:border focus:border-blue-600  my-2 w-full"/>
                    <p className="text-blue-600 font-semibold">Organization Name <span className="text-gray-500">*Optional</span></p>
                    <input type="Text" placeholder="Enter your password" className="bg-white rounded border border-gray-300 p-3 focus:border focus:border-blue-600  my-2 w-full"/>

                    <button type="submit" className="bg-blue-600 text-white p-3 rounded my-3 font-bold text-xl w-full">Register</button>
                </form>
            </div>
        </div>
      </div>
      </div>
  )
}

预先感谢您帮助我。

Answer 1

问题在于您将字符串内部的条件写为字符串。

// you have
className="... validEmail?focus:border-blue-600:border-red-600 ..."

// should be
className=`... ${ validEmail ? 'focus:border-blue-600' : 'border-red-600' } ...`

JavaScript 不会在常见字符串 (",') 内进行计算。它如何知道 : 是否是条件或条件的一部分类名的一部分？您必须使用template literals，如上所述。

---

如果您不想使用模板文字，您可以使用字符串连接 + 的旧方法来实现:

className={"..." + validEmail ? "focus:border-blue-600" : "border-red-600" + "..."}

---

有关更复杂的解决方案，请查看 clsx图书馆。