如何在React中结合Tailwind CSS条件禁用输入框？

你一开始写的这段代码没法实现预期效果：

{...(!props.isTrue && "disabled")}

原因很简单——React组件的属性需要键值对形式，直接传字符串"disabled"不会被识别成有效的禁用配置。

正确的做法是直接给disabled属性绑定你的布尔状态变量。你找到的方案其实还能简化，因为props.isTrue本身就是布尔值，不用多此一举用三目运算符转换：

export function InputFiled(props) {
  return (
    <>
      <input
        className="py-2 pl-3 rounded-[14px] border-[1.3px] border-red-500"
        placeholder="Name"
        onChange={(e) => props.setData(e.target.value)}
        value={props.data}
        disabled={props.isTrue}
      />
    </>
  );
}

这样当props.isTrue为true时，输入框会被禁用；为false时则恢复可编辑状态，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Abidullah