如何将布尔值传递给React ts中的Material UI MenuItem值？

Question

我是反应新手，在传递一个简单的布尔值作为材质 UI 库中 MenuItem 的支柱时遇到一些问题。我不认为解决方案太复杂。有人可以让我知道如何解决此错误吗？

该错误指向的行如下所示：

<MenuItem value={true}>Yes</MenuItem>

错误看起来像这样：

  The last overload gave the following error.
TS2769: No overload matches this call.
    Type 'true' is not assignable to type 'string | number | readonly string[] | undefined'.
    402 |                                 onChange={handlePO_status}
    403 |                             >
  > 404 |                                 <MenuItem let value={true}>Yes</MenuItem>
        |                                               ^^^^^
    405 |                                 <MenuItem value={false}>No</MenuItem>
    406 |                             </Select>
    407 |                         </FormControl>

任何帮助将不胜感激。谢谢你！

Answer 1

这对我有用，它实际上也保留了boolean底层表单状态中的类型（在 Material-UI v5 中）。

<MenuItem value={true as any}>True</MenuItem>
<MenuItem value={false as any}>False</MenuItem>

Answer 2

正如错误中所述 -value期望的类型是string | number | readonly string[] | undefined。因此，您不能将布尔值传递到value属性中。

很难从代码片段中看出您想要完成什么，但您可能需要重新考虑代码的结构。例如，

<MenuItem onClick={() => handlePO_status(true)}>Yes</MenuItem>
<MenuItem onClick={() => handlePO_status(false)}>No</MenuItem>