英文:
Show Checkboxes based on a Condition in JSX
问题
我对JSX还不熟悉，本周的任务是在特定条件为真时隐藏复选框。条件是当有帐户登录时，不应显示复选框。
下面是复选框及其条件的代码：
<TableRow>
{!isOpsAdmin || !isOmiAdmin || !isRider || !isRunner && (
<TableCell padding="checkbox">
<Checkbox
// eslint-disable-next-line no-console
onChange={() => console.log("checked all")}
/>
</TableCell>
)}
</TableRow>
目前，只有当我登录到isOpsAdmin帐户时，复选框才会隐藏。但每当我尝试登录到其他帐户（isOmiAdmin、isRider、isRunner）时，复选框都会可见，这不是预期的结果。可以有人帮助吗，因为我对JSX非常陌生，因此您的帮助将非常感激。
英文:
I am new to JSX and my task for this week is to hide the checkbox whenever a certain condition is true. The conditions are when an account is logged in, the checkboxes shouldn't be visible on that account.
The code below is the code for the checkboxes and its condition:
<TableRow>
{!isOpsAdmin || !isOmiAdmin || !isRider || !isRunner && (
<TableCell padding="checkbox">
<Checkbox
// eslint-disable-next-line no-console
onChange={() => console.log("checked all")}
/>
</TableCell>
)}
Right now, the checkboxes are only hidden when I login on the isOpsAdmin account, but whenever I try logging in on the other accounts (isOmiAdmin, isRider, isRunner), the checkboxes would be visible and that is not the expected result. Can anyone help as I'm very new to JSX therefore your help will be very much appreciated.
答案1
得分: 2
我认为您可能希望更新显示复选框的逻辑条件：
!(isOpsAdmin || isOmiAdmin || isRider || isRunner) && ...
如果任何条件为真，此条件将为假。
您还可以考虑使用HTML的hidden属性，例如：
<TableCell
padding="checkbox"
hidden={isOpsAdmin || isOmiAdmin || isRider || isRunner}
>
<Checkbox
// eslint-disable-next-line no-console
onChange={() => console.log("checked all")}
/>
</TableCell>
您可以隐藏单元格本身，或者只在Checkbox组件内使用hidden属性，如果只想隐藏复选框。
英文:
I think you might want to update the logic condition for showing the checkbox:
!(isOpsAdmin || isOmiAdmin || isRider || isRunner) && ...
this condition will be false if any of the conditions are true.
you might also want to consider using the html hidden attribute like:
<TableCell
padding="checkbox"
hidden={isOpsAdmin || isOmiAdmin || isRider || isRunner}
>
<Checkbox
// eslint-disable-next-line no-console
onChange={() => console.log("checked all")}
/>
</TableCell>
You can either hide the cells itself, or just use the hidden attribute inside the Checkbox component if you just want to hide the checkbox
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论