formik 相关问题

我已经使用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); } } };

reactjs formik

回答 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()

formik yup

回答 1 投票 0

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

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

reactjs material-ui autocomplete formik formik-material-ui

回答 1 投票 0

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

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

javascript reactjs react-select react-component formik

回答 5 投票 0

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

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