reactjs - Formik FieldArray 不接受复选框对象

Question

我正在尝试在 Formik 中推送一个复选框对象，但它不起作用。我参考了https://codesandbox.io/s/formik-example-forked-owodd?file=/index.js

但我想将对象推入initialValue。

下面是我的做法

{userManagement.map((permissions) => (
                              <li className="col-sm-3 col-xs-6" key={permissions.task}>
                                <label className="checkbox">
                                  <input
                                    name="permission"
                                    type="checkbox"
                                    value={permissions}
                                    onBlur={(e) => {
                                      if (e.currentTarget.checked) {
                                        push({ permission: permissions });
                                        console.log(values.permission);
                                      } else {
                                        const idx = values.permission.indexOf(permissions.value);
                                        remove(idx);
                                      }
                                    }}
                                  />
                                  <span />
                                  {permissions.label}
                                </label>
                              </li>
                            ))}

标签： reactjsformik

Answer 1

我对此的解决方案是：

                      <FieldArray
                        name="permission"
                        render={({ push, remove }) => (
                          <ul className="sub-rights-area row">
                            {permissions.map((perm) => (
                              <li className="col-sm-3 col-xs-6" key={perm.task}>
                                <label className="checkbox">
                                  <input
                                    name="permission"
                                    type="checkbox"
                                    value={perm.task}
                                    checked={values.permission.map((e) => e.task).includes(perm.task)}
                                    onChange={(e) => {
                                      if (e.target.checked) {
                                        push({ status: perm.status, task: perm.task });
                                        console.log(values.permission);
                                      } else {
                                        const index = values.permission
                                          .map(function (e) {
                                            return e.task;
                                          })
                                          .indexOf(perm.task);
                                        remove(index);
                                      }
                                    }}
                                  />
                                  <span />
                                  {perm.name}
                                </label>
                              </li>
                            ))}
                          </ul>
                        )}
                      />