formik 相关问题

如何将 DropdownPicker setValue 与 Formik handleChange 或 setValueField 一起使用？

如何将下拉选择器 setValue 与 Formik 一起使用？ handleChange 或 setValueField 无法正常工作。有什么建议么？ const [打开，setOpen] = useState(false); 常量项 = [ { 标签：'...

如何在卸载组件时防止吐司？

我试图阻止组件卸载时，如果用户单击提交。尝试使用 useState 进行操作，但它对我不起作用。 我的目标是向用户展示 toast，但如果他点击提交，他应该...

使用 Formik 时出现“未捕获（承诺）类型错误：无法获取”

我正在学习如何使用Formik。我正在尝试访问通过 Postman 工作的后端，但我似乎无法使用 Formik 进行获取。 这是我的 onSubmit 的 App.js 代码： 我正在学习如何使用 Formik。我正在尝试访问通过 Postman 工作的后端，但我似乎无法使用 Formik 获取。 这是我的 onSubmit 的 App.js 代码： <Formik initialValues={{ ...initialState, }} validationSchema={formValidation} onSubmit={values => fetch('/api/client', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(values), }).then(res => res.json())}> 这是我的按钮组件代码： const ButtonWrapper = ({ children, ...otherProps }) => { const { submitForm } = useFormikContext(); const handleSubmit = () => { submitForm(); }; const configButton = { variant: 'contained', color: 'primary', fullWidth: true, onClick: handleSubmit }; return ( <Button {...configButton} > {children} </Button> ); }; export default ButtonWrapper; 不确定我做错了什么 TypeError: Failed to fetch表示网络请求不成功。尝试打开浏览器的开发人员工具并选择“网络”选项卡。查看 React 发出的请求是否与您在 Postman 中发出的请求相匹配。另请检查开发人员控制台选项卡，因为它应该记录导致请求失败的确切错误。 浏览器在网络请求中执行其他检查，其中之一是响应标头和 CORS 或跨源请求脚本。如果 Access-Control-Allow-Origin 响应标头与本地主机站点不匹配，那么您将收到此错误。

ReactJS 中的 Material UI 自动完成类别

我正在使用 MUI 自动完成和 Formik，我想将其分组。如果它没有 sub_accounts，那么它不应该有标题标签。像这样的东西：https://mui.com/material-ui/...

如何在 React + Symfony 6 后端表单中链接两个表？

我有一个带有 Symfony 6.4 后端的 React Form，我正在尝试将两个表链接在一起（Tiers 和 GroupeDdo），其中每个 Tiers 有一个 GroupeDdo。这是我的 Tiers.php ： 我有一个带有 Symfony 6.4 后端的 React Form，我试图将两个表链接在一起（Tiers 和 GroupeDdo），其中每个 Tiers 有一个 GroupeDdo。这是我的 Tiers.php : <?php namespace App\Entity; use App\Repository\TiersRepository; use Doctrine\ORM\Mapping as ORM; #[ORM\Entity(repositoryClass: TiersRepository::class)] class Tiers { #[ORM\Id] #[ORM\GeneratedValue] #[ORM\Column] private ?int $id = null; #[ORM\ManyToOne(inversedBy: 'tiers')] private ?GroupeDdo $groupe_ddo = null; [...] public function getId(): ?int { return $this->id; } public function getGroupeDdo(): ?GroupeDdo { return $this->groupe_ddo; } public function setGroupeDdo(?GroupeDdo $groupe_ddo): self { $this->groupe_ddo = $groupe_ddo; return $this; } } 这是我的 GroupeDdo.php : <?php namespace App\Entity; use App\Repository\GroupeDdoRepository; use Doctrine\Common\Collections\ArrayCollection; use Doctrine\Common\Collections\Collection; use Doctrine\ORM\Mapping as ORM; #[ORM\Entity(repositoryClass: GroupeDdoRepository::class)] class GroupeDdo { #[ORM\Id] #[ORM\GeneratedValue] #[ORM\Column] private ?int $id = null; #[ORM\Column(length: 255)] private ?string $groupe_ddo_nom = null; #[ORM\OneToMany(targetEntity: Ddo::class, mappedBy: 'groupe_ddo')] private Collection $ddos; #[ORM\OneToMany(targetEntity: Tiers::class, mappedBy: 'groupe_ddo')] private Collection $tiers; #[ORM\OneToMany(targetEntity: User::class, mappedBy: 'groupe_ddo')] private Collection $users; public function __construct() { $this->ddos = new ArrayCollection(); $this->tiers = new ArrayCollection(); $this->users = new ArrayCollection(); } public function getId(): ?int { return $this->id; } public function getGroupeDdoNom(): ?string { return $this->groupe_ddo_nom; } public function setGroupeDdoNom(string $groupe_ddo_nom): static { $this->groupe_ddo_nom = $groupe_ddo_nom; return $this; } /** * @return Collection<int, Ddo> */ public function getDdos(): Collection { return $this->ddos; } public function addDdo(Ddo $ddo): static { if (!$this->ddos->contains($ddo)) { $this->ddos->add($ddo); $ddo->setGroupeDdoId($this); } return $this; } public function removeDdo(Ddo $ddo): static { if ($this->ddos->removeElement($ddo)) { // set the owning side to null (unless already changed) if ($ddo->getGroupeDdoId() === $this) { $ddo->setGroupeDdoId(null); } } return $this; } /** * @return Collection<int, Tiers> */ public function getTiers(): Collection { return $this->tiers; } public function addTier(Tiers $tier): static { if (!$this->tiers->contains($tier)) { $this->tiers->add($tier); $tier->setGroupeDdoId($this); } return $this; } public function removeTier(Tiers $tier): static { if ($this->tiers->removeElement($tier)) { // set the owning side to null (unless already changed) if ($tier->getGroupeDdoId() === $this) { $tier->setGroupeDdoId(null); } } } } 这是我的表格的完整版本： import React, { useState, useEffect } from 'react'; import { Formik, Form, Field, ErrorMessage } from 'formik'; import { useAuth } from '../context/AuthContext'; import Cookies from 'js-cookie'; // L'interface Tiers définit les champs de la table Tiers et leur types interface Tiers { tiers_raison_sociale: string | null; tiers_intitule: string | null; tiers_heures_ouverture: { [key: string]: { ouverture: string; fermeture: string }[]; } | null; tiers_telephone: string | null; tiers_courriel: string | null; tiers_rdv: boolean | null; groupe_ddo_id: number | null; tiers_adresse: string | null; tiers_ville: string | null; tiers_cp: string | null; tiers_pays: string | null; } // L'interface GroupeDDo définit les champs de la table GroupeDdo et leur types interface GroupeDDO { id: number; groupeDdoNom: string; } const TiersForm: React.FC = () => { //Utilisation d'un useState de l'API const [apiError, setApiError] = useState(''); const [groupeDDOList, setGroupeDDOList] = useState<GroupeDDO[]>([]); const [selectedGroupeId, setSelectedGroupeId] = useState<number | null>(0); const { isAuthenticated } = useAuth(); if (!isAuthenticated) { window.location.href = '/'; } useEffect(() => { const fetchGroupeDDOList = async () => { try { const response = await fetch('http://127.0.0.1:8000/api/liste-groupe-ddo'); if (!response.ok) { throw new Error('Erreur lors de la récupération des données des groupes'); } const data = await response.json(); setGroupeDDOList(data); } catch (error) { console.error(error); } }; fetchGroupeDDOList(); }, []); //Valeur initiales du formulaire const initialValues: Tiers = { tiers_raison_sociale: '', tiers_intitule: '', tiers_heures_ouverture: { lundi: [{ ouverture: '', fermeture: '' }], mardi: [{ ouverture: '', fermeture: '' }], mercredi: [{ ouverture: '', fermeture: '' }], jeudi: [{ ouverture: '', fermeture: '' }], vendredi: [{ ouverture: '', fermeture: '' }], samedi: [{ ouverture: '', fermeture: '' }], dimanche: [{ ouverture: '', fermeture: '' }], }, tiers_telephone: '', tiers_courriel: '', tiers_rdv: false, groupe_ddo_id: null, tiers_adresse: '', tiers_ville: '', tiers_cp: '', tiers_pays: '', }; const onSubmit = async (values: Tiers) => { try { if (!isAuthenticated) { throw new Error('Vous devez être connecté pour effectuer cette action'); } const token = Cookies.get('authToken'); const selectedGroupe = groupeDDOList.find(groupe => groupe.id === (selectedGroupeId as number)); if (!selectedGroupe) { throw new Error('Le groupe selectionné est introuvable'); } if (selectedGroupe) { values.groupe_ddo_id = selectedGroupe.id; } const response = await fetch('http://127.0.0.1:8000/api/create/tiers', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` }, body: JSON.stringify(values), }); if (!response.ok) { throw new Error('Erreur lors de la création de la société'); } // Réinitialiser les champs du formulaire après la soumission réussie setApiError(''); window.location.href = '/'; } catch (error) { setApiError('Impossible d\'envoyer le formulaire'); } }; // Conditions de chaque champ du formulaire const validate = (values: Tiers) => { const errors: Partial<Tiers> = {}; // Si le code de société n'est pas entré, écrire qu'il est requis if (!values.tiers_raison_sociale) { errors.tiers_raison_sociale = 'Raison sociale de la société requise'; } return errors; }; return ( <> {groupeDDOList.length === 0 ? ( <p>Chargement en cours...</p> ) : ( <Formik {...{ initialValues, onSubmit, validate }} > {({ isSubmitting, values, handleChange }) => ( <Form> <fieldset> <legend>A Quel Groupe de Société doit-il être lié ?</legend> <Field as="select" name="groupe_ddo_id" label="Groupe Société d'un tiers" value={selectedGroupeId} onChange={(e: React.ChangeEvent<HTMLSelectElement>) => { // const selectedValue = (e.target as HTMLSelectElement).value; const selectedValue = parseInt(e.target.value); // const selectedGroupe = selectedGroupeId ? groupeDDOList.find(groupe => groupe.id === parseInt(selectedValue)) : null; // if (selectedGroupe) { setSelectedGroupeId(selectedValue); // } }}> {groupeDDOList.map((groupe, index) => ( <option key={index} value={groupe.id}> {groupe.groupeDdoNom} </option> ))} </Field> <ErrorMessage name="id" component="div" className="error" /> {apiError && <div className="error">{apiError}</div>} <br /> <button type="submit" disabled={isSubmitting}> {isSubmitting ? 'Création en cours...' : 'Créer Tiers'} </button> </fieldset> </Form> )} </Formik > )} </> ); }; export default TiersForm; 这里的问题是，当我尝试获取 GroupeDdo 列表以创建选择字段时，我看不到它们，并显示错误：警告：未定义的数组键“groupe_ddo_id”。我应该怎么做才能获取我所有的 GroupeDdo 并确保它是数据库中 GroupeDdo 的值？ 谢谢！ 来自我的控制器，我使用 findAll 函数来获取所有内容。但在这样做的过程中，我也试图获取集合，这不是我想要的，因为其中一个集合是 Tiers，这正是我试图使用表单创建的。 因此，我创建了一个函数，仅从 GroupeDdo 实体获取我需要的内容。

ReactJS 中的 Material UI 自动完成子选择

我正在使用 MUI 自动完成和 Formik，我想将其分组。如果它没有 sub_accounts，那么它不应该有标题标签。像这样的东西：https://mui.com/material-ui/...

使用 Formik 和 Yup 库为 React + vite 创建可重用的表单组件

我正在尝试创建一个react+vite项目，我试图使用Formik和Yup实现可重用的表单组件，但还无法实现这一点。 我创建了一个名为 <

是否可以对react-admin库创建的表单使用Formik验证？

我是新手，刚刚开始在我的一个项目中使用react-admin 库。我找不到任何地方使用 formik 和反应管理表单。那么是否可以通过react-admin使用formik验证...

如何使用useformik resetForm或handleReset函数重置formik中的单选按钮？

我有一个表单，我希望在成功提交后清除我的输入，useFormik handleReset 或 useformik.resetForm() 在文本类型输入上工作正常，但单选按钮仍然保持选中状态...

Formik 值未保存在 redux 持久切片中

店铺： 从“@reduxjs/toolkit”导入{configureStore}； //切片 从“./mainLayoutSlice”导入mainLayoutReducer； 从“./userDataSlice”导入userDataReducer； 我...

聆听Formik价值观的变化

我在组件中有一个 formik 表单，我想重用它。为了做到这一点，我需要监听表单值的变化，以便调用两个函数 getFormValues 和 getFormErrors，这将是

React Typescript：如何处理 Formik 文件上传？

我正在 React Typescript 上使用 Formik 来处理我的学生资料表单。该表单用于处理简历和成绩单文件上传。我注意到一切都很好，直到我测试了我的...

将新定义的 props 传递给作为 props 传递的（功能）组件

假设我有一个如下所示的父组件： 假设我有一个如下所示的父组件： <ParentComponent contentComponent={ <GenericContent content={<FormContent title="Content Title" formComponent={<ChildComponent />} />} /> } /> 现在，在我的 FormContent 组件中，我想将 props 传递给我的 formComponent，在本例中是 ChildComponent，但实际上可以是另一个组件。 但是我知道我想要传递的 props 总是在 formComponent 组件中。 const FormContent = ({ title, formComponent, }: FormContentPropsType) => ( <> <Formik enableReinitialize validateOnChange={false} initialValues={{ ...formData, }} validationSchema={SandboxFormValidationSchema} onSubmit={sendForm} > {({ values, setValues, errors, setErrors, handleSubmit, }) => ( <Form> {/* Here I would like to use formComponent with the following props : formData={values} setFormData={setValues} formErrors={errors} setFormErrors={setErrors} handleSubmit={handleSubmit} */} </Form> )} </Formik> </> 我怎样才能实现这个目标？ 根据我对你的问题的理解，你想向子组件添加额外的道具。 这可以使用 React.cloneElement() 来实现 <Form> React.cloneElement(fromComponent,{ formData={values} setFormData={setValues} formErrors={errors} setFormErrors={setErrors} handleSubmit={handleSubmit} }) </Form> React.cloneElement() 将元素（组件）、新的 props 和孩子作为参数。

Next.js。使用 formik 形式的服务器操作。带参数的操作不起作用

Next.js 14.1.4。在一个页面上选择一项服务，然后使用某些字段为此服务创建一个表单。对于表单，我使用 useFormik 和 Yup 验证。处理提交

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

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

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

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

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

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

MUI 和 Formik 自动完成多个

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

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

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

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"), 也许，你会成功。