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

时间:2020-01-21 01:11:05

标签: reactjs react-final-form react-final-form-arrays

在React Final Form中,我们可以对format类型的输入使用parsetext道具,以便存储与指定值不同的值,但这似乎不起作用复选框也是如此。

示例:

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

在此示例中,无论使用truefalse,要存储的值仍为formatparse。可以将值从[true, false]格式化为["foo"]吗?

在此先感谢您的帮助。

1 个答案:

答案 0 :(得分:1)

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

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

但是听起来很像,就像您想要使用复选框来管理数组中的成员资格的内置功能一样。为此,您只需为value指定一个<Field/>属性。请参见“酱”示例:

Edit quirky-voice-zruje

☝️还包括format / parse示例。