仅当特定输入为空时，如何禁用按钮？

Posted 2023-02-22

【中文标题】仅当特定输入为空时，如何禁用按钮？

【英文标题】：How can I disable a button only if specific Input is empty?

【发布时间】：2022-01-05 17:31:22

【问题描述】：

我试图找到一种仅在特定输入字段仍然为空时禁用按钮的方法。 我的意思是这个过程只需要几个输入字段，有些只是可选的。

我学习的课程向我们展示了如何禁用按钮，直到每个输入都有效，所以我不知道该怎么做。

这是我的代码，我希望仅当日期为空时才禁用该按钮。

<form className="place-form" onSubmit=placeSubmitHandler>
    <Input
    id="date"
    element="input"
    type="date"
    label="Date"
    validators=[VALIDATOR_REQUIRE()]
    errorText=""
    onInput=inputHandler
  />

  <Input
    id="description"
    element="textarea"
    label="description"
    validators=[VALIDATOR_MINLENGTH(5)]
    errorText=""
    onInput=inputHandler
  />
      

  <Button type="submit" disabled= formState.isValid  >
     Sumbit
  </Button>
</form>

【参考方案1】：

你需要把Not sign like !放在formState.isValid之前

<Button type="submit" disabled= !formState.isValid  >
     Sumbit
  </Button>

我使用react-hook-form 准备了一个示例。你可以在这里查看：

工作演示

【讨论】：

但是我必须在两个字段中输入才能按下按钮

我准备了一个样本。请检查工作演示

非常感谢！

不客气 :)