Question

我有一个复选框表（真/假值），initialValues是通过api调用填充的。每个“设施”都有一个Enabled和Immutable值。如果Immutable为真，则应选中Enabled和readOnly复选框，这意味着不能取消选中它。因此，如果Immutable为false，则Enabled复选框应可编辑。

我正在使用以下代码段呈现上述场景

<Table.Cell>
  {JSON.stringify(enabled) === "true" &&
  `facilities[${index}].immutable` ===
    "true" ? (
    <Field
      type="checkbox"
      name={`facilities[${index}].enabled`}
      readOnly
    />
  ) : (
    <>
     <Field
       type="checkbox"
       name={`facilities[${index}].enabled`}
     />
    </>
 )}
</Table.Cell>

I have a codesandbox here。您可以通过选中/取消选中沙箱表下方的处于调试状态的框来查看更新的值。

似乎条件始终为假，并呈现非readOnly <Field />

Answer 1

尝试一下：

<Table.Cell>
  {JSON.stringify(enabled) === "true" &&
  `facilities[${index}].immutable` ===
    "true" ? (
    <Field
      type="checkbox"
      name={`facilities[${index}].enabled`}
      // readOnly
      disabled
    />
  ) : (
    <>
     <Field
       type="checkbox"
       name={`facilities[${index}].enabled`}
     />
    </>
 )}
</Table.Cell>

传统的只读复选框仍可编辑

1 个答案: