Formik FiedlArray -复选框、标签/文本字段组合
Formik FiedlArray -复选框、标签/文本字段组合
提问于 2022-03-18 12:10:09
我正试图在一个网站上集成一个formik --在那里，他们希望有复选框和标签，如果这是一个新条目，将其作为文本字段。
https://formik.org/docs/examples/field-arrays
我正在学习这个例子，但我不确定如何检测它是否是一个新添加的字段，以及如何在文本框或复选框附近的标签之间切换这样的内容？
https://codesandbox.io/s/angry-bouman-ycesi5
import React from "react";
import ReactDOM from "react-dom";
import { Formik, Field, Form, ErrorMessage, FieldArray } from "formik";
const initialValues = {
friends: [
{
name: "billybob",
checkbox_name: true
}
]
};
const AddGoals = () => (
<div>
<h1>Invite friends</h1>
<Formik
initialValues={initialValues}
onSubmit={async (values) => {
await new Promise((r) => setTimeout(r, 500));
alert(JSON.stringify(values, null, 2));
}}
>
{({ values }) => (
<Form>
<FieldArray name="friends">
{({ insert, remove, push }) => (
<div>
{values.friends.length > 0 &&
values.friends.map((friend, index) => (
<div className="row" key={index}>
<div className="col">
<label>
<Field
type="checkbox"
name={`friends.${index}.checkbox_name`}
/>
xxxx
</label>
<label htmlFor={`friends.${index}.name`}>Name</label>
<Field
name={`friends.${index}.name`}
placeholder="Jane Doe"
type="text"
/>
<ErrorMessage
name={`friends.${index}.name`}
component="div"
className="field-error"
/>
</div>
<div className="col">
<button
type="button"
className="secondary"
onClick={() => remove(index)}
>
X
</button>
</div>
</div>
))}
<button
type="button"
className="secondary"
onClick={() => push({ name: "", checkbox_name: false })}
>
Add Goal
</button>
</div>
)}
</FieldArray>
<button type="submit">Submit</button>
</Form>
)}
</Formik>
</div>
);
ReactDOM.render(<AddGoals />, document.getElementById("root"));那么我们会不会用一个新的标志来设定一个条件？
import React from "react";
import ReactDOM from "react-dom";
import { Formik, Field, Form, ErrorMessage, FieldArray } from "formik";
const initialValues = {
friends: [
{
name: "billybob",
checkbox_name: true,
new: false
}
]
};
const AddGoals = () => (
<div>
<h1>Invite friends</h1>
<Formik
initialValues={initialValues}
onSubmit={async (values) => {
await new Promise((r) => setTimeout(r, 500));
alert(JSON.stringify(values, null, 2));
}}
>
{({ values }) => (
<Form>
<FieldArray name="friends">
{({ insert, remove, push }) => (
<div>
{values.friends.length > 0 &&
values.friends.map((friend, index) => (
<div className="row" key={index}>
<div className="col">
<label>
<Field
type="checkbox"
name={`friends.${index}.checkbox_name`}
/>
{!friend.new ? (
<span>{friend.name}</span>
) : (
<Field
name={`friends.${index}.name`}
placeholder="Jane Doe"
type="text"
/>
)}
</label>
<ErrorMessage
name={`friends.${index}.name`}
component="div"
className="field-error"
/>
</div>
<div className="col">
<button
type="button"
className="secondary"
onClick={() => remove(index)}
>
X
</button>
</div>
</div>
))}
<button
type="button"
className="secondary"
onClick={() =>
push({ name: "", checkbox_name: false, new: true })
}
>
Add Goal
</button>
</div>
)}
</FieldArray>
<button type="submit">Submit</button>
</Form>
)}
</Formik>
</div>
);
ReactDOM.render(<AddGoals />, document.getElementById("root"));回答 1
Stack Overflow用户
发布于 2022-03-27 07:58:18
因此，如果我正确理解了您的意思，您希望有一个待办事项列表，点击Add目标按钮将添加一个输入框，这样用户就可以在其中输入，通过单击保存按钮，您需要呈现一个包含已保存的待办事项的列表，以及复选框和标签。
如果是这样的话，您可以通过下面的代码片段来做到这一点。
import "./styles.css";
import React from "react";
import { Formik, Field, Form, ErrorMessage, FieldArray } from "formik";
const intialFriendVlaues = {
name: "",
invited: true,
isNew: true
};
const initialValues = {
friends: [intialFriendVlaues]
};
const App = () => (
<div>
<h1>Invite friends</h1>
<Formik
initialValues={initialValues}
// onSubmit={async (values) => {
// await new Promise((r) => setTimeout(r, 500));
// alert(JSON.stringify(values, null, 2));
// }}
onSubmit={(values, actions) => {
try {
actions.resetForm({
values: {
friends: values.friends.map((friend) => ({
...friend,
isNew: false
}))
}
});
} catch (error) {
console.log(error);
}
}}
>
{({ values }) => (
<Form>
<FieldArray name="friends">
{({ insert, remove, push }) => (
<div>
{values.friends.length > 0 &&
values.friends.map((friend, index, self) => (
<React.Fragment key={index}>
<div className="row">
<div className="col">
{friend.isNew ? (
<div className="row">
<label htmlFor={`friends.${index}.name`}>
Name
</label>
<Field
name={`friends.${index}.name`}
placeholder="Jane Doe"
type="text"
/>
<ErrorMessage
name={`friends.${index}.name`}
component="div"
className="field-error"
/>
</div>
) : (
<label>
<Field
type="checkbox"
name={`friends.${index}.invited`}
/>
{friend.name}
</label>
)}
</div>
<div className="col">
<button
type="button"
className="secondary"
onClick={() => remove(index)}
>
X
</button>
</div>
</div>
{self.length - 1 === index ? (
<div className="row">
<button
type="button"
className="secondary"
onClick={() => push(intialFriendVlaues)}
>
Add Goal
</button>
<button type="submit">Save</button>
</div>
) : null}
</React.Fragment>
))}
</div>
)}
</FieldArray>
</Form>
)}
</Formik>
</div>
);
export default App;
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71526828
复制相关文章
相似问题
腾讯云开发者
