Jika saya menggunakan formik, bagaimana saya boleh menulis nilai yang betul dalam objek bersarang?

Question

Memandangkan tatasusunan medan yang sepadan dengan nama medan dalam objek borang, saya cuba menulis nilai bersarang, tetapi atas sebab tertentu formik tidak tahu cara menulis nilai bersarang, ini hanya berfungsi untuk bahagian atas yang tahap< ;/p>

Saya akan meninggalkan pautan ke kotak pasir kod dalam ulasan

eksport fungsi lalai App() {
  borang const = useFormik({
    Nilai awal: {
      nama: "",
      log masuk: "",
      tentang: {
        umur: "",
        pangkat: "",
        kereta: {
          nama: "",
          tahun: ""
        }
      }
    }
  });

  medan const = [
    {
      nama: { tajuk: "Nama anda", medan: {} },
      log masuk: { tajuk: "Log masuk anda", medan: {} },
      tentang: {
        tajuk: "Tentang",
        medan: {
          umur: { tajuk: "Umur anda", medan: {} },
          pangkat: { tajuk: "Pangkat anda", medan: {} },
          kereta: {
            tajuk: "Kereta anda",
            medan: {
              nama: { tajuk: "Nama kereta", medan: {} },
              tahun: { tajuk: "Tahun kereta", medan: {} }
            }
          }
        }
      }
    }
  ];
  const { values, handleChange } = form;

  console.log("VALUES", nilai);

  const itemsRender = (item, idx) =>
    kunci const = Object.keys(item).at(-1);
    kembali (
      <kunci div={idx}>
        <p>{item[key]?.title}</p>
        <masukan
          name={key}
          value={values[key]}
          onChange={handleChange}
          pemegang tempat={item[key].title}
        />

        {!isEmpty(item[key]?.fields) &&
          <gaya div={{ marginKiri: 20 }}>
            {Object.entry(item[key]?.fields).map(itemsRender)}
          </div>
        )}
      </div>
    );
  };

  kembalikan <>{fields.map(itemsRender)}</>;
}

Answer 1

Anda perlu mengemas kini atribut name和value untuk memasukkan laluan penuh ke medan bersarang

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

Kod anda hanya mengendalikan satu tahap sarang.
Untuk sarang yang lebih dalam, anda perlu membuat dan memproses medan bersarang secara rekursif

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

Akhir sekali, jangan gunakan handleChange处理嵌套字段，而应该使用Formik的setFieldValue terus untuk mengemas kini nilai medan bersarang.
Anda boleh mengakses setFieldValue dari objek bentuk:

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

kodkotak pasir