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

Posted 2023-03-07

【中文标题】如何使用tailwind css动态更改下一个js中的边框颜色？

【英文标题】：How to dynamically change border color in next js with tailwind css?

【发布时间】：2021-08-26 12:46:24

【问题描述】：

我正在尝试在有效或无效电子邮件 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"
      
      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>
  )

提前感谢您帮助我。

【参考方案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 library。

【参考方案2】：

我设法发现您正在尝试在此处更改您的 className 值： <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"/>

使用条件运算符，您可以通过以下方式实现：

function post() 
  const [validEmail,setvalidEmail] = useState(true);
  const validEmailClass = "bg-white rounded border border-gray-300 p-3 focus:border focus:border-blue-600 my-2 w-full";
  const invalidEmailClass = "bg-white rounded border border-gray-300 p-3 focus:border border-red-600 my-2 w-full";
 

return (
  ...
  <input type="text" placeholder="Enter your email id" className=validEmail ?  validEmailClass : invalidEmailClass/>
  ...
);

【讨论】：

您可以在字符串中使用条件。如果你可以只改变一个类，为什么要创建两个几乎相同的变量？

@Jax-p 伙计，我只是表明条件不适用于文字字符串，您的方法也很好。现在他可以随心所欲地在他的代码中实现了！我只是发现我的方法更具可读性