如何使用 tailwind css 禁用输入字段并有条件地做出反应？ [复制]

Question

你好开发社区我在这里有另一个问题需要你的帮助。

我想根据布尔状态禁用输入字段，如果状态为真，则输入字段应禁用，否则它可以编辑。

我的状态变量是 True，它可以是 true 或 false，这是代码

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}
        {...(!props.isTrue && "disabled")}
        // here (below) it works fine but it is permanently disabled option
        //   disabled
      />
    </>
  );
}

我从附件 (Conditional disabling of button) 问题中得到的解决方案是：

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? true : false}
        />
    </>
  );
}

Answer 1

您可能需要根据此状态设置额外的 tailwind css 类或您想要作为基线的 prop。

const [isDisabled, setDisabled] = useState(false);
//inside render
<input type='button' 
 onClick={(e)=> setDisabled(!isDisabled)}
 disabled={isDisabled}
>