Maison > Questions et réponses > le corps du texte
P粉0468781972023-08-18 09:05:51
Vous devez mettre à jour l'attribut name
和value
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); }}