条件只读复选框仍然可编辑

Question

我有 table 个复选框（true/false 值），initialValues 是通过 api 调用填充的。每个 "facility" 都有一个 Enabled 和 Immutable 值。如果 Immutable 为真，则应选中 Enabled 复选框并且 readOnly，这意味着它不能取消选中。所以如果 Immutable 是 false，Enabled 复选框应该是 editable.

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

<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。您可以看到 checking/unchecking 沙箱中 table 下方处于调试状态的框更新的值。

似乎条件总是错误的并且呈现非 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>

条件只读复选框仍然可编辑

Condtional readOnly checkbox still editable

reactjs

formik