问题描述
我正在尝试为数组中的字段合并一个复选框,用于判断该项目是否完整。我有点迷茫,但这就是组件现在的样子:
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"
/>