formik 相关问题

React的表单库

如果从变量加载初始状态,为什么 Formik 组复选框不起作用?

从“react”导入React; 从“react-dom”导入ReactDOM; 从“formik”导入 { Formik, Field, Form }; const sleep = (ms) => new Promise((r) => setTimeout(r...

回答 1 投票 0

React-phone-input-2 与 Formik 在值返回中返回空字符串

我想在电话字段中将 Formik 与 React-Phone-Input-2 链接,它不允许我使用 HandleChange、HandleBlur 和values.phone 在提交时返回空字符串 我该如何处理?

回答 1 投票 0

React 和 Material-UI 自动完成多个项目

我在使用 Formik 和 MUI 自动完成处理多个项目时遇到问题。 例如:如果您通过输入“铅笔”进行搜索,问题是,它不会突出显示它。您还可以选择...

回答 1 投票 0

MUI 和 Formik 自动完成多个

我在使用 Formik 和 MUI 自动完成处理多个项目时遇到问题。 有时,它无法正确突出显示所选项目,特别是在搜索该项目后。还有另一个

回答 1 投票 0

哪种表单库更适合 React - Formik 或 React Hook Forms

我和我的团队这几天正在做一个React项目,我是React新手。我们正在努力为我的 React 应用程序选择一个更好的表单库。 那里有多种选择...

回答 1 投票 0

formik中如何同时进行提交和字段验证?

我想使用formik在提交时验证表单,同时也进行字段级验证。例如,提交时验证所有字段,并在更改时验证字段。 返回 ( 我想使用formik在提交时验证表单,同时也进行字段级别验证。例如,提交时验证所有字段,并在更改时验证字段。 return ( <div className='add-member'> <h1>Register a new member</h1> <Formik validationSchema={validationSchema} validateOnBlur={false} validateOnChange={false} initialValues={{ name: ''}} onSubmit={() => { console.log('something') }} > {({errors}) => ( <Form> <div className='member-info'> <div className='title'><p>Info</p></div> <div className='input' id='name-input'> <label>Name</label> <Field name='name' placeholder={errors.name ? '*Required' : null} className={errors.name ? 'input-error' : ''} /> </div> </Formik> </div> ) 我在 Formik 组件中禁用了 validateOnChange,以便提交验证有效,但不知道如何验证更改时的字段。 嗯,您可以尝试使用 Yup 和validationSchema 进行表单验证。 而且你应该使用 useFormik 钩子而不是 Formik 组件。 然后你可能会得到正确的答案。 例如 const formik = useFormik({ initialValues, validationSchema: registrationSchema, ... the code that you want const registrationSchema = Yup.object().shape({ fieldName: Yup.string() .oneOf([Yup.ref('')], "example commit"), 也许,你会成功。

回答 1 投票 0

Formik:根据之前的值设置值

是否可以根据之前的值设置formik值? 这是一个简单的例子: 常量 onButtonClick = () =>{ Array.from(Array(5).keys()) .forEach((num) => 形式。

回答 1 投票 0

React Hook 表单 defaultValues v/s 值

当使用React Hook Form时,虽然我理解“defaultValues”用于在初始表单加载时设置表单字段值。 然而,假设有一个带有依赖的动态形式

回答 2 投票 0

在基于 MUi 组件的 Formik 表单中禁用 chrome 自动填充功能

我有一个使用 formik 库并使用 MUI 组件进行输入的 React 表单。 在表单加载时,密码和用户名等值会由 chrome 自动填充自动填充。 尝试过这个 https://devel...

回答 1 投票 0

如何累积 FieldArray 输入的值(formik + React)

我有一个包含商品详细信息的 FieldArray - 数量和单价。在FieldArray之外,我有一个total_all输入(已禁用,仅供用户查看所有商品的总价)。 我要计算...

回答 1 投票 0

如何在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

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