Formik FieldArray 不接受复选框对象
Formik FieldArray doesn't accept checkbox Objects
我试图在 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>
))}
我对此的解决方案是:
<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>
)}
/>
我试图在 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>
))}
我对此的解决方案是:
<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>
)}
/>