Maison  >  Questions et réponses  >  le corps du texte

Si j'utilise formik, comment puis-je écrire la valeur correcte dans l'objet imbriqué ?

<p>Étant donné un tableau de champs qui correspondent aux noms de champs dans l'objet de formulaire, j'essaie d'écrire une valeur imbriquée, mais pour une raison quelconque, Formik ne sait pas comment écrire des valeurs imbriquées, cela ne fonctionne que pour le haut ceux de niveau< ;/p> <p>Je laisserai un lien vers codesandbox dans les commentaires</p> <pre class="brush:php;toolbar:false;">exporter la fonction par défaut App() { const form = useFormik({ Valeurs initiales: { nom: "", se connecter: "", à propos de: { âge: "", rang: "", voiture: { nom: "", années: "" } } } }); champs const = [ { nom : { titre : "Votre nom", champs : {} }, login : { titre : "Votre login", champs : {} }, à propos de: { titre : "À propos", des champs: { âge : { titre : "Votre âge", champs : {} }, rang : { titre : "Votre rang", champs : {} }, voiture: { titre : "Votre voiture", des champs: { nom : { titre : "Nom de la voiture", champs : {} }, années : { titre : "Années de voiture", champs : {} } } } } } } ]; const { valeurs, handleChange } = formulaire ; console.log("VALEURS", valeurs); const itemsRender = (élément, idx) => clé const = Objet.keys(item).at(-1); retour ( <clé div={idx}> <p>{item[clé]?.title}</p> <entrée nom={clé} valeur={valeurs[clé]} onChange={handleChange} placeholder={item[key].title} /> {!isEmpty(item[clé]?.fields) && <div style={{ marginLeft : 20 }}> {Object.entries(item[clé]?.fields).map(itemsRender)} </div> )} </div> ); } ; return <>{fields.map(itemsRender)}</>; }</pré>
P粉410239819P粉410239819452 Il y a quelques jours542

répondre à tous(1)je répondrai

  • P粉046878197

    P粉0468781972023-08-18 09:05:51

    Vous devez mettre à jour l'attribut namevalue pour inclure le chemin complet vers le champ imbriqué

    <input
      name={`${key}.${nestedFieldName}`} // 包含嵌套字段的路径
      value={getIn(values, `${key}.${nestedFieldName}`)} // 使用formik的getIn获取嵌套值
      onChange={handleChange}
      placeholder={fieldObj.title}
    />
    

    Votre code ne gère qu'un seul niveau d'imbrication.
    Pour une imbrication plus profonde, vous devez restituer et traiter les champs imbriqués de manière récursive

    {Object.entries(item[key]?.fields).map(([nestedFieldName, fieldObj]) => (
      <div style={{ marginLeft: 20 }} key={nestedFieldName}>
        <p>{fieldObj.title}</p>
        <input
          name={`${key}.${nestedFieldName}`}
          value={getIn(values, `${key}.${nestedFieldName}`)}
          onChange={handleChange}
          placeholder={fieldObj.title}
        />
        {fieldObj.fields && (
          <div style={{ marginLeft: 20 }}>
            {Object.entries(fieldObj.fields).map(itemsRender)}
          </div>
        )}
      </div>
    ))}
    

    Enfin, n'utilisez pas handleChange处理嵌套字段,而应该使用Formik的setFieldValue directement pour mettre à jour la valeur d'un champ imbriqué.
    Vous pouvez accéder à setFieldValue depuis l'objet formulaire :

    onChange={(e) => {
      form.setFieldValue(`${key}.${nestedFieldName}`, e.target.value);
    }}
    

    codesandbox

    répondre
    0
  • Annulerrépondre