formik을 사용하는 경우 중첩된 개체에 올바른 값을 어떻게 쓸 수 있나요?
P粉410239819
2023-08-17 16:26:31
<p>양식 개체의 필드 이름과 일치하는 필드 배열이 주어졌을 때 중첩 값을 쓰려고 하는데 어떤 이유로 formik이 중첩 값을 쓰는 방법을 모르기 때문에 이는 최상위에만 작동합니다. 레벨 1</p>
<p>댓글에 코드샌드박스 링크를 남겨두겠습니다</p>
<pre class="brush:php;toolbar:false;">기본 함수 내보내기 App() {
const 형식 = useFormik({
초기값: {
이름: "",
로그인: "",
에 대한: {
나이: "",
순위: "",
자동차: {
이름: "",
연도: ""
}
}
}
});
const 필드 = [
{
이름: { 제목: "귀하의 이름", 필드: {} },
로그인: { 제목: "귀하의 로그인", 필드: {} },
에 대한: {
제목: "정보",
필드: {
나이: { 제목: "나이", 필드: {} },
순위: { 제목: "귀하의 순위", 필드: {} },
자동차: {
title: "당신의 차",
필드: {
이름: { 제목: "자동차 이름", 필드: {} },
연도: { 제목: "자동차 연도", 필드: {} }
}
}
}
}
}
];
const { 값, handlerChange } = 양식;
console.log("VALUES", 값);
const itemsRender = (항목, idx) =>
const key = Object.keys(item).at(-1);
반품 (
<div 키={idx}>
<p>{item[key]?.title}</p>
<입력
이름={키}
값={값[키]}
onChange={handleChange}
자리 표시자={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>
중첩 필드에 대한 전체 경로를 포함하려면
으아악name
和value
속성을 업데이트해야 합니다.귀하의 코드는 한 수준의 중첩만 처리합니다.
으아악더 깊은 중첩을 위해서는 중첩된 필드를 재귀적으로 렌더링하고 처리해야 합니다
마지막으로, 중첩 필드의 값을 업데이트하기 위해
으아악handleChange
处理嵌套字段,而应该使用Formik的setFieldValue
를 직접 사용하지 마세요.양식 개체에서
setFieldValue
에 액세스할 수 있습니다.codesandbox