可以通过一个提交按钮处理多个表单吗？
可以通过一个提交按钮处理多个表单吗？
提问于 2020-03-26 02:36:06
我在ReactJS上有一个项目，你可以找到here (参见开发分支)，或者在our web site上查看它。如您所见，我使用formik处理表单。现在我只有一个submit按钮来处理所有表单，但是它不能通过form属性链接到表单。挺好的。
不幸的是，我在实现表单验证时遇到了一个问题。我仍然更喜欢使用formik validation，但问题是它需要表单和提交按钮之间的直接连接，如下所示：
export function GenerateButton(props) {
return (
<Button id="genButton"
form="form1"
type="submit"
onClick={props.onClick}>
Generate
</Button>
);
}有什么想法，我可以链接所有的表单与提交按钮？或者我必须在每个表单中使用虚构的按钮(位置:绝对；左：-9999px;)，并在按下生成按钮后模仿它们的点击？
另外，现在html表单标签中有类，这只是一个愚蠢的错误，必须是id="forms"属性。我可以这样生成唯一的id：id={"form"+(props.index + 1)}。
另外，我为我的英语感到抱歉。
回答 1
Stack Overflow用户
发布于 2020-03-26 05:33:03
我认为你可以很容易地用Formik的fieldarray来处理这个问题。
您将拥有一个数组和一个表单列表，然后您可以简单地添加和删除表单。
使用Formik的验证也不会有任何问题。
下面是一个示例，它完全符合您的要求：
import React from "react";
import { Formik, Form, Field, FieldArray } from "formik";
const formInitialValues = { name: "", lastName: "" };
const FormList = () => (
<Formik
initialValues={{ forms: [formInitialValues] }}
onSubmit={values =>
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
}, 500)
}
render={({ values }) => (
<Form>
<FieldArray
name="forms"
render={arrayHelpers => (
<div>
{values.forms.map((formItem, index) => (
<div key={index}>
<Field name={`forms.${index}.name`} />
<Field name={`forms.${index}.lastName`} />
<button
type="button"
onClick={() => arrayHelpers.remove(index)} // remove a form from the list of forms
>
-
</button>
<button
type="button"
onClick={() =>
arrayHelpers.insert(index, formInitialValues)
} // insert an empty string at a position
>
+
</button>
</div>
))}
<div>
<button type="submit">Submit</button>
</div>
</div>
)}
/>
</Form>
)}
/>
);
export default FormList;我也为你提供了一个code sandbox版本
如果你还有什么问题，请告诉我
更多阅读：
https://jaredpalmer.com/formik/docs/api/fieldarray#fieldarray-array-of-objects
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60855233
复制相关文章
相似问题
腾讯云开发者
