Form context

Form context

createFormContext를 사용해 만들어진 폼 컨텍스트의 사용법을 다루는 문서예요. createFormContext로 생성한 컨텍스트 변수를 어디에서나 임포트해 사용할 수 있어요.

출처: 문서

본문

컨텍스트 변수를 어디에서나 임포트해 사용할 수 있어요.

// NameInput.tsx
import { TextInput } from '@mantine/core';
import { useUserFormContext } from './form-context';

export function NameInput() {
  const form = useUserFormContext();
  return (
    <TextInput
      label="Name"
      placeholder="Name"
      key={form.key('name')}
      {...form.getInputProps('name')}
    />
  );
}

// UserForm.tsx
import { NumberInput } from '@mantine/core';
import { UserFormProvider, useUserForm } from './form-context';
import { NameInput } from './NameInput';

function UserForm() {
  const form = useUserForm({
    mode: 'uncontrolled',
    initialValues: {
      age: 0,
      name: '',
    },
  });

  return (
    <UserFormProvider form={form}>
      <NameInput />
      <NumberInput label="Age" {...form.getInputProps('age')} />
    </UserFormProvider>
  );
}

createFormContext 사용법에 대한 자세한 내용은 레시피 목록의 컨텍스트 관련 문서를 참고해요.

더 알아보기 (Learn more)

• Form status
• Form actions
• Recipes