无法通过字段以反应最终形式在复选框上设置初始值答案

【问题标题】：Unable to set initialValues on checkboxes through Field in react final form无法通过字段以反应最终形式在复选框上设置初始值
【发布时间】：2022-08-19 05:24:50
【问题描述】：

我在使用 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 on 代替，因为我无权访问渲染复选框的位置。

<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 on 时，我无法编辑复选框。我用一个值和多个值都试过了。这是 react-final-form 中的错误还是可以通过其他方式完成？

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

标签： javascript reactjs forms react-final-form final-form

【解决方案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 } }}

希望有帮助！

【讨论】：