如何在react中使用redux形式数组中的离子复选框

Question

我正在尝试合并一个复选框，用于确定数组中字段的项是否完整。我有点迷路了，但这就是组件现在的样子：

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"
/>

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

Answer 1

对于任何正在挣扎的人，我找到了正确的方法：这就是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"
/>