如何使用 React Final Form Field Array 格式化复选框字段的值？

Question

在 React Final Form 中，我们可以对 text 类型输入使用 format 或 parse 属性，以便存储与指定值不同的值，但这似乎不是以与复选框相同的方式工作。

示例：

<FieldArray name='test' initialValue={[true, false]}>
    <Field 
        component='input' 
        type='checkbox' 
        format={value => value ? 'foo' : null} 
        parse={value => value ? 'foo' : null}/>
    </Field>
</FieldArray>

在此示例中，无论使用 format 和 parse，要存储的值仍将是 true 或 false。是否可以格式化从 [true, false] 到 ["foo"] 的值？

在此先感谢您的帮助。

Answer 1

您的 format 函数需要将其转换回布尔值。

<Field
  name="employed"
  component="input"
  type="checkbox"
  format={v => v === "foo"}
  parse={v => (v ? "foo" : null)}
/>

但它听起来就像您想要使用复选框来管理数组成员资格的内置功能。为此，您只需为 <Field/> 指定一个 value 道具。请参阅 "Sauces" 示例：

☝️ 还包括 format/parse 示例。