你如何在反应中使用 redux 表单数组中的离子复选框？

如何解决你如何在反应中使用 redux 表单数组中的离子复选框？

我正在尝试为数组中的字段合并一个复选框，用于判断该项目是否完整。我有点迷茫，但这就是组件现在的样子：

export const ReduxFormStartWorkoutCheckBox: React.FC = (field: any) => {
  console.log(field);
  return (
    <IonCheckBox
      {...field.input}
      value={true}
      checked={
        field.input.value === "true" || field.input.value === true
          ? true
          : false
      }
      name={field.input.name}
      color="primary"
    />
  );
};

这是它的用法：

<Field
  name={`${set}.completed`}
  component={ReduxFormStartWorkoutCheckBox}
  type="checkBox"
/>

但它不起作用。这只是在我选中一个不同的框后打开复选框，然后它不会关闭，所以我肯定会离开。任何提示都会有所帮助。

解决方法

对于任何正在挣扎的人，我找到了正确的方法： 这就是 redux 表单复选框的样子

export const ReduxFormCheckBox: React.FC = (field: any) => (
  <IonButton
    size="small"
    color={field.input.checked ? "success" : "danger"}
    fill="clear"
    onClick={() => field.input.onChange(!field.input.value)}
  >
    <IonIcon
      icon={field.input.checked ? checkmarkCircle : checkmarkCircleOutline}
      slot="icon-only"
    />
  </IonButton>
);

这就是它的名字：

<Field
 name={`${set}.completed`}
 component={ReduxFormCheckBox}
 type="checkbox"
/>