【React Final Form】 오브젝트나 배열에서도 관리할 수 있어 【소 재료】
5172 단어 양식react-final-form자바스크립트React
React Final Form의 매력은
name
Prop을 사용하여 간단히 양식 상태를 관리 할 수 있다는 것입니다.그
name
에, 도트를 포함한 캐릭터 라인 (예 "users[2].name"
, dot-and-bracket syntax 라고 부르는 것 같습니다) 를 건네주는 것으로, 필드의 값을, 오브젝트나 배열의 값으로서 관리할 수가 있습니다 .array.stories.tsx
export const Array = () => {
const handleSubmit = () => {};
return (
<Form onSubmit={handleSubmit}>
{({ handleSubmit }) => (
<form onSubmit={handleSubmit}>
{[0, 1, 2].map((i) => (
<div key={i}>
<Field name={`users[${i}].name`} component="input" placeholder="name"/>
<Field name={`users[${i}].email`} component="input" placeholder="email"/>
</div>
))}
<h4>Value</h4>
{/* ここから、フォームの値(values)を表示 */}
<FormSpy>
{({ values }) => (
<pre>
<code>{JSON.stringify(values, null, 2)}</code>
</pre>
)}
</FormSpy>
</form>
)}
</Form>
);
};
스크린샷
참고 기사
Reference
이 문제에 관하여(【React Final Form】 오브젝트나 배열에서도 관리할 수 있어 【소 재료】), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/honey32/items/865679fc33824e3555c3
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(【React Final Form】 오브젝트나 배열에서도 관리할 수 있어 【소 재료】), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/honey32/items/865679fc33824e3555c3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)