【React Final Form】 오브젝트나 배열에서도 관리할 수 있어 【소 재료】

전미 된장입니다만, React Final Form 의 사용법을 1로부터 알고 싶은 경우는, ↓의 기사를 부디.

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

스크린샷





참고 기사

좋은 웹페이지 즐겨찾기