Heim  >  Fragen und Antworten  >  Hauptteil

Wie kann ich bei Verwendung von formik den korrekten Wert in das verschachtelte Objekt schreiben?

<p>Angesichts einer Reihe von Feldern, die mit den Feldnamen im Formularobjekt übereinstimmen, versuche ich, einen verschachtelten Wert zu schreiben, aber aus irgendeinem Grund weiß Formik nicht, wie man verschachtelte Werte schreibt. Dies funktioniert nur für den oberen Bereich Level Ones< ;/p> <p>Ich werde in den Kommentaren einen Link zu codesandbox hinterlassen</p> <pre class="brush:php;toolbar:false;">Standardfunktion App() exportieren { const form = useFormik({ Anfangswerte: { Name: "", Anmeldung: "", um: { Alter: "", Rang: "", Auto: { Name: "", Jahre: "" } } } }); const-Felder = [ { Name: { Titel: „Ihr Name“, Felder: {} }, Login: { Titel: „Ihr Login“, Felder: {} }, um: { Titel: „Über“, Felder: { Alter: { Titel: „Ihr Alter“, Felder: {} }, Rang: { Titel: „Ihr Rang“, Felder: {} }, Auto: { Titel: „Dein Auto“, Felder: { name: { title: "Autoname", Felder: {} }, Jahre: { Titel: "Autojahre", Felder: {} } } } } } } ]; const { Werte, handleChange } = form; console.log("VALUES", Werte); const itemsRender = (item, idx) => const key = Object.keys(item).at(-1); zurückkehren ( <div key={idx}> <p>{item[key]?.title}</p> <Eingabe name={key} value={values[key]} onChange={handleChange} placeholder={item[key].title} /> {!isEmpty(item[key]?.fields) && <div style={{ marginLeft: 20 }}> {Object.entries(item[key]?.fields).map(itemsRender)} </div> )} </div> ); }; return <>{fields.map(itemsRender)}</>; }</pre>
P粉410239819P粉410239819452 Tage vor540

Antworte allen(1)Ich werde antworten

  • P粉046878197

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

    您需要更新namevalue属性,以包含嵌套字段的完整路径

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

    您的代码只处理了一层嵌套。
    对于更深层次的嵌套,您需要递归地渲染和处理嵌套字段

    {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>
    ))}
    

    最后,不要直接使用handleChange处理嵌套字段,而应该使用Formik的setFieldValue来更新嵌套字段的值。
    您可以从表单对象中访问setFieldValue

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

    codesandbox

    Antwort
    0
  • StornierenAntwort