如何將我的 isLoading 常量添加到此條件語句中？

Question

我添加了這個常量

    const isLoading = !templates;

為了更改我的按鈕的顏色並在我的卡片仍在加載時防止點擊。

但是，我不知道如何將我的 isLoading 常量添加到這個條件語句中。

<MenuButton
    className={
    !firstTimeOnOnboarding || selectedTemplatesIds.length >= minNumOfOptions
    ? `${styles.actionBlue}`: `${styles.actionNormal}`}>
    {buttonText}
</MenuButton>

我嘗試這樣做，但它不起作用。

className={
!isLoading && !firstTimeOnOnboarding || selectedTemplatesIds.length >= minNumOfOptions ? `${styles.actionBlue}`: `${styles.actionNormal}`}

Answer 1

如果你想防止點擊，你真正需要的是禁用按鈕，而加載變量為真，因為 MenuButton 是一個自定義組件，你應該創建一個“禁用”道具來管理按鈕禁用。

這是一個帶有 HTML 按鈕標簽的示例。 我為按鈕添加了全局類來管理禁用和通用屬性，如果你想使用更漂亮的選項，你可以使用“classnames package”來使用多個 CSS 類

JSX：

<button
    className={
    !firstTimeOnOnboarding || selectedTemplatesIds.length >= minNumOfOptions
    ? `${styles.actionBlue} ${styles.myButton}`: `${styles.actionNormal} ${styles.myButton}`}
    disabled={isLoading}
>
    { isLoading ?  'Loading' : buttonText}
</button>

我添加了一個 CSS 類，因為這是一個很好的實踐，以可視方式向用戶展示禁用按鈕，也許您想知道如何做到這一點。

CSS：

.actionBlue {
  ...your styles
}

.actionNormal {
  ...your styles
}

.myButton {
  ...if you want common styles, here
}

.myButton:disabled {
  opacity: .5;
}

提示：我在加載此條件時管理按鈕的文本。

 { isLoading ?  'Loading...' : buttonText}

另外我認為，您應該使用“CSS 特異性”來管理按鈕的禁用。

.myButton {
  ...if you want common styles, here
}

.myButton.actionBlue {
  ...your styles
}

.myButton.actionNormal {
  ...your styles
}

.myButton:disabled {
  opacity: .5;
}