反应 - 在按钮上设置禁用 state

Question

尝试在按钮上设置禁用 state 时检查某个条件是否为真的正确方法是什么？

我已经尝试了下面的代码，但我得到了一个错误。

第 237:23 行：在条件表达式 no-unneeded-ternary 中不必要地使用 boolean 文字

<Button
variant="contained"
className="global-button"
disableElevation
disabled={!brush_logs_list.length ? true : false}
onClick={applyForEntireMouth}>
APPLY FOR ENTIRE MOUTH
</Button>

Answer 1

请像这样尝试；

<Button
  variant="contained"
  className="global-button"
  disableElevation
  // disabled={!brush_logs_list.length ? true : false}
  disabled={!brush_logs_list.length}  // instead of above line
  onClick={applyForEntireMouth}
>
  APPLY FOR ENTIRE MOUTH
</Button>

实际上， .brush_logs_list.length的类型已经是boolean ，所以你不需要? : ? :运营商。 只需使用.brush_logs_list.length就足够了。

Answer 2

Bikas Lin 的回答是正确的。 为了清楚起见，让我稍微扩展一下。 禁用标志仅接受 boolean。 使用.length 进行检查时，0（空）将返回 false，其他任何内容都将返回 true。 因此根本不需要三元运算符，因为 .length 完全返回您需要的内容。

有多种方法可以围绕此 go。 假设会有多种可能性，例如，如果 the.length 超过给定数量等。在这种情况下，您想定义一个 function，例如“handleDisabled”并在那里验证。 对于这些情况，switch 是一个好方法/选项（没有双关语）。

Answer 3

使用disabled={.!!brush_logs_list.length}

Answer 4

你可以这样尝试

<Button
   variant="contained"
   className="global-button"
   disableElevation
   disabled={(brush_logs_list || []).length}
   onClick={applyForEntireMouth}>
APPLY FOR ENTIRE MOUTH
</Button>