formik 相关问题

React的表单库

如何在react组件中使用formik进行验证

我尝试在注册组件中使用formik,但是在验证中我遇到了问题。 我已经对每个字段(例如姓名、电子邮件、密码)进行了验证,但我看不到。 我该如何解决这个问题?

回答 1 投票 0

在formik multistep中上传文件

我已经使用formik-wizard-form实现了formik多步骤表单。除了文件上传之外,它可以与其他输入一起正常工作。 我使用以下代码进行文件上传: 我已经使用 formik-wizard-form 实现了 formik 多步表单。除了文件上传之外,它可以与其他输入一起正常工作。 我使用以下代码进行文件上传: <Form.Group controlId="upload"> <Col> <div className="form-group files"> Add Attachments: <input type="file" name="upload" value={values.upload?.files } onChange={event => { setFieldValue("upload", event.currentTarget.files); }} multiple /> </div> </Col> </Form.Group> 控制台日志上传值如下所示。 如何将文件上传到服务器? 文件输入的方法,如文档中所述,是: 在 React 中,<input type="file" /> 始终是不受控制的组件 因为它的值只能由用户设置,而不能以编程方式设置。 因此,它利用自己的机制以及浏览器的安全实现来设置发送文件的值。出于安全原因,您无法检索发件人本地计算机上的完整文件路径。但是,您可以使用 FileReader 对象异步读取文件内容,然后使用结果填充值并将其发送到父表单组件。 在某些情况下您可以更改文件输入的值 以编程方式,喜欢 null 来重置您的输入。 在我的多步骤表单中,我使用了formik和material-ui。 type="file" 的字段 (UploadField) 使用自定义 Field 组件进行包装。每当子组件因上传文件而更新时,父组件都会收到通知并开始读取指定 Blob 的内容。完成后,结果属性包含表示文件数据的数据 URL,然后将其设置为其值。目前,它接受基于使用是的为其设置的验证的图像。 传统的 application/json 类型不足以将图像上传到您的服务器;您需要使用 FormData 来代替。您需要使用表单数据编写 handleSubmit() 函数并传递由 Formik 处理的值。 您可以使用 Fetch API 或 Axios 发送 POST 请求到 您的服务器,具体取决于您的喜好。 const onSubmit = () => { // Create an object of formData const formData = new FormData(); // Update the formData object formData.append("myFile", file, file.name); // Details of the uploaded file console.log(file); // Request made to the backend api // Send formData object axios.post("api/uploadfile", formData); }; // UploadForm.jsx import React, { useState, useEffect } from "react"; import { Field, useField } from "formik"; import { Grid, FormHelperText } from "@material-ui/core"; import UploadField from "../../FormFields/UploadField"; import Thumb from "../Helper/Thumb"; const ImageForm = (props) => { const { formField: { image } } = props; const [field, meta, helper] = useField(image.name); const { touched, error } = meta; const { setValue } = helper; const isError = touched && error && true; const { value } = field; const [fileName, setFileName] = useState(value.name); const [file, setFile] = useState(value.file); const [src, setSrc] = useState(value.src); const _onChange = (e) => { let reader = new FileReader(); let file = e.target.files[0]; if (file) { reader.onloadend = () => setFileName(file.name); if (file.name !== fileName) { reader.readAsDataURL(file); setSrc(reader); setFile(file); } } }; useEffect(() => { if (file && fileName && src) { setValue({ file: file, src: src, name: fileName }); console.log(fileName); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [src, fileName, file]); return ( <React.Fragment> <Grid container spacing={3} justify="center" alignItems="center"> <Grid item xs={12}> <label> {image.label} </label> <br /> <div style={{ display: "flex", justifyContent: "flex-start", fontSize: "1.2em" }} > <Field variant="outlined" field={field} component={UploadField} onChange={_onChange} isError={isError} /> {isError && <FormHelperText color={"red"}>{error}</FormHelperText>} </div> </Grid> <Grid item>{file && src && <Thumb file={file} src={src}></Thumb>}</Grid> </Grid> </React.Fragment> ); }; export default ImageForm; //UploadField.jsx import React from "react"; import { Field } from "formik"; const UploadField = ({ field, form: { touched, errors }, name, label, isError, ...props }) => { return ( <> <Field variant="outlined" name="uploader" title={label} type={"file"} {...props} /> </> ); }; export default UploadField; 链接到代码沙箱, Formik 不支持“开箱即用”的文件上传。因此,如果您异步上传文件,则必须执行以下操作: const rebuildData = (values) => { let formData = new FormData(); Object.keys(values).forEach(key => { formData.append(key, values[key]); }); return formData; }; <Formik onSubmit={values => { const data = rebuildData(values); axios({ method: 'post', url: '/YOUR_ENDPOINT', data }) } } 不要忘记将其余表单数据添加到 formData。 您可以使用 formik 中的 setFieldValue。参考:福米克 const _onChange = (e) => { let reader = new FileReader(); let file = e.target.files[0]; if (file) { reader.onloadend = () => setFileName(file.name); if (file.name !== fileName) { reader.readAsDataURL(file); setSrc(reader); setFieldValue('file',file); } } };

回答 3 投票 0

如何将字段标签传递给 yup 模式?

我发现自己重复将字段标签传递给 yup 模式和 formik 表单上的字段: var schema = Yup.object({ foo: Yup.string().required().label("名字") }); ... 我发现自己重复将字段标签传递给 yup 模式和 formik 表单上的字段: var schema = Yup.object({ foo: Yup.string().required().label("First name") }); ... <Formik validationSchema={schema} ...> <TextField name="firstName" label="First name"/> </Formik> 如果我可以使用 formik 注册字段元数据,然后以某种方式让 Yup 可以使用该元数据,那不是很棒吗? 例如。 validationSchema 属性接受一个函数。如果此字段元数据可作为 validSchema 的参数 - 然后我可以使用这些标签构建架构。 另一种方法是在对象中声明标签,然后让 yup 模式和我的字段从那里查找它(例如,通过自定义上下文)。 但我没有看到可能有更简单的方法。 调用该方法需要按顺序: 而不是 foo: Yup.string().required().label("First name") 您需要使用 foo: Yup.string().label("First name").required()

回答 1 投票 0

Formik 验证不适用于 Material UI 自动完成功能

我想在用户清除选择时显示验证错误。 沙箱链接为 https://codesandbox.io/p/sandbox/formik-autocomplete-yh3sl7?file=%2Fsrc%2FApp.tsx%3A1%2C1-84%2C1 当...

回答 1 投票 0

在使用带有formik的react-select时无法读取未定义的属性“类型”

我正在使用react-select和formik构建一个带有自动填充文本框的表单。 { ...

回答 5 投票 0

如何在第一次提交表单后将formik中的validateOnChange和validateOnBlur更改为true?

我是 formik 的新手,一直在开发一个包含很多字段的注册页面。 我想仅在提交时使用 yup 模式运行所有验证。 因此,我决定更改

回答 2 投票 0

我的 Formik 表单未从数据库填充数据

我的 Formik 表格有两个问题。第一个问题是群体选择。我正在调用我的数据库并收到包含正确数据的响应,但它没有显示在选择中...

回答 1 投票 0

多次响应formik表单onsubmit事件调用?

从“formik”导入 { Formik, Form, Field }; 从“antd”导入{按钮}; 常量添加用户 = () => { 常量初始值 = { 姓名: ””, }; 返回 ( &...

回答 1 投票 0

Formik 如何在表单提交时显示错误

尝试在表单提交时验证字段。 (同时,onblur 和 onchange 也必须处于活动状态) 但是当我将字段留空并提交表单时。它没有给出任何错误。 这怎么可能……

回答 2 投票 0

反应 formik 监听嵌套数组 prop 对象的更改

我正在使用formik,我的表单模式是这样的 const FormSchema = Yup.object().shape({ id: 是的.number(), myNumber: 是的.number(), name: Yup.string().required("必填"), 产品...

回答 1 投票 0

“mui-one-time-password-input”不适用于“formik”

我正在开发一个 Next.js 项目,我必须使用 mui-one-time-password-input 库进行 OTP 输入。对于表单验证,我使用 formik。 现在,当我尝试正确应用 value 和 onChange 时...

回答 1 投票 0

如何防止每次击键时重新生成验证模式

我正在使用 Formik 的 useFormik() 来跟踪我的表单状态,是的进行验证。我的一些表单字段是相互依赖的。在我的用例中,我需要动态生成验证模式。

回答 1 投票 0

Formik 无法与 Next JS 14 应用程序目录一起使用

我尝试使用 Formik 创建一个非常简单的验证表单。我完全按照他们的指南和示例进行操作,但它不起作用。我找不到解决方案(如果我错了,请纠正我)。哈...

回答 1 投票 0

如何使用yup验证reactjs中上传的文件数量

我有一个reactjs表单,要求用户上传至少3个文件。如何编写验证模式?

回答 1 投票 0

在 Formik 中捕获 React Router 操作的错误

我用React Router操作和加载器编写了一个应用程序,后来我将react Form更改为Formik表单,它使用useSubmit钩子发送数据。有什么方法可以捕获操作函数中的错误...

回答 1 投票 0

需要基于另一个字段的值的字段 - formik,是的

我有一个反应形式, 其中有一个选择字段, 假设该字段具有值 A、B、C、D、E、F。 现在说,另一个字段 ChooseSubType 仅在我选择 B 或 D 时才显示,并且该字段只会...

回答 4 投票 0

如何在 React 应用程序中以编程方式填写 Formik 表单,同时其组件不暴露于 DOM

如何以编程方式填写在 React 应用程序中使用 Formik 构建的表单,并确保表单的填写方式与手动填写表单的方式相同? 一个...

回答 1 投票 0

onClick 或 onChange 在预行 UI 选择组件中不起作用

我正在 React 中使用 preline UI 库来设计我的网站。但不知何故,如果我按照 preline UI、onChange 或 onClick 使用带有 data-hs-select 属性的“select”,则实际上没有任何效果。不...

回答 1 投票 0

Mui TextField 占位符在第一次刷新时显示值

我遇到了这种奇怪的行为,我不知道如何解决,在此表单的编辑模式下,如果刷新页面,我会遇到一个错误,其中值和占位符都显示在字段中 -- 那个...

回答 1 投票 0

Yup 中如何测试数组中值的唯一性?

我已经使用 Formik 在 React 中创建了一个带有验证的动态表单。 到目前为止我所取得的成就: 当前代码允许用户选择要购买的门票数量,然后输入名称...

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.