无法通过react final表单中的字段在复选框上设置initialValues

Question

我的项目中initialValues有问题，我使用的是react final形式。

我想要的是在复选框列表中设置多个initialValue。

我知道initialValues属性，我可以从那里设置它，如下所示。

<Form
onSubmit={onSubmit}
initialValues={{ sauces: ["ketchup", "mustard"] }}
render={({
handleSubmit,
form,
values,
...formProps
}) => (
<form onSubmit={handleSubmit}>
<div>
<label>Sauces</label>
<div>
<label>
<Field
name="sauces"
component="input"
type="checkbox"
value="ketchup"
/>{" "}
Ketchup
</label>
<label>
<Field
name="sauces"
component="input"
type="checkbox"
value="mustard"
/>{" "}
Mustard
</label>
</form>
/>

但我希望能够在上使用initialValue，因为我无法访问我呈现复选框的位置。

<Form
onSubmit={onSubmit}
render={({
handleSubmit,
form,
values,
...formProps
}) => (
<form onSubmit={handleSubmit}>
<div>
<label>Sauces</label>
<div>
<label>
<Field
name="sauces"
component="input"
type="checkbox"
value="ketchup"
initialValue={["ketchup", "mustard"]}
/>{" "}
Ketchup
</label>
<label>
<Field
name="sauces"
component="input"
type="checkbox"
value="mustard"
initialValue={["ketchup", "mustard"]}
/>{" "}
Mustard
</label>
</form>
/>

下面有一个代码示例，我通过和设置initialValues

它在示例中工作得很好，但在值被设置时，当我在上使用initialValue时，我无法编辑复选框。我用一个值和多个值都试过了。这是react最终形式中的一个bug，还是可以用另一种方式实现？

https://codesandbox.io/s/react-final-form-issues-with-checkboxes-forked-6fc68u?file=/index.js

Answer 1

我意识到这个答案对于您的应用程序来说可能为时已晚，但对于复选框来说，initialValue是一个布尔值。所以，如果你想在单个复选框上选中initialValue，你只需要将其设置为true：

<Form
onSubmit={onSubmit}
render={({
handleSubmit,
form,
values,
...formProps
}) => (
<form onSubmit={handleSubmit}>
<div>
<label>Sauces</label>
<div>
<label>
<Field
name="sauces"
component="input"
type="checkbox"
value="ketchup"
initialValue
/>{" "}
Ketchup
</label>
<label>
<Field
name="sauces"
component="input"
type="checkbox"
value="mustard"
initialValue
/>{" "}
Mustard
</label>
</form> )
/>

此外，如果您想在表单组件上设置initialValues，则输入看起来像：

<Form
onSubmit={onSubmit}
initialValues={{ sauces: { ketchup: true, mustard: true } }}

希望能有所帮助！