无法通过字段以最终形式在复选框上设置initialValues

Question

在我的项目中，我遇到了与initialValues有关的问题，在那里我使用的是react final-form。

我要寻找的是在复选框列表中设置多个initialValues。

我知道在哪里可以设置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>
/>

下面有一个代码示例，其中我通过并通过

它在示例中运行得很好，但是在设置值时，当我使用initialValue on时，我无法编辑复选框。我尝试了一个值和多个值。这是一个反应-最终形式的错误，还是可以用另一种方式实现？

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

Answer 1

我意识到，对于您的应用程序来说，这个答案可能太晚了，但是对于复选框，initialValue是一个布尔值。因此，如果希望在单个复选框上检查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
            </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 } }}

希望这能帮上忙！