如何添加我的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

如果你想防止点击，你真正需要的是禁用按钮，而加载变量为true，因为MenuButton是一个自定义组件，你应该创建一个道具"disabled"管理按钮禁用。

这是一个HTML按钮标签的例子。我为按钮添加了全局类来管理禁用和公共属性，如果你想使用更漂亮的选项，你可以使用"classnames "使用多个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;
}