Heim > Fragen und Antworten > Hauptteil
P粉0468781972023-08-18 09:05:51
您需要更新name
和value
属性,以包含嵌套字段的完整路径
<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); }}