조타이 소개. 파생 원자. UI 제어

파생 원자를 만드는 것은 쉽고 유용합니다. 하나의 데이터 소스에서 많은 atom을 작성할 수 있습니다. 소스 데이터를 변환하거나 이를 기반으로 새로운 정보를 생성할 수 있습니다. Derived atom은 데이터 모델을 구조화하고 UI 상태를 제어하는 ​​첫 번째 도구입니다.

하나의 입력과 유효성 검사로 이미 간단한 양식을 만들었습니다. 이제 유효성 검사 및 제출 버튼을 사용하여 다른 입력을 추가해 보겠습니다. 나중에 validation atom을 사용하여 사용자가 양식을 제출할 수 있는지 여부를 결정할 수 있습니다. 이 부분에서는 기본 HTML 요소에서 Material UI로 전환합니다.

import TextField from "@mui/material/TextField";

const Input = ({ type = "text", label, sourceAtom }: InputProps) => {
  const [text, setText] = useAtom(sourceAtom);
  return (
    <TextField
      type={type}
      label={label}
      variant="filled"
      value={text}
      onChange={(e) => setText(e.target.value)}
    />
  );
};

새 버전의 Input 구성 요소를 사용하고 이름과 암호에 대한 입력을 생성해 보겠습니다.

const nameAtom = atom("John");
const passwordAtom = atom("");

const Form = () => {
  return (
    <Box
      component="form"
      sx={{
        "& > :not(style)": { m: 2, width: "25ch" }
      }}
    >
      <Typography variant="h3" gutterBottom>
        Registration form
      </Typography>

      <Input label="Name" sourceAtom={nameAtom} />
      <Input type="password" label="Password" sourceAtom={passwordAtom} />
    </Box>
  );
};

소스 아톰이 준비되었습니다. 다음 단계는 파생 검증 원자를 생성하는 것입니다.

const nameLengthAtom = atom((get) => get(nameAtom).length);
const passwordLengthAtom = atom((get) => get(passwordAtom).length);

const isNameValid = atom((get) => get(nameLengthAtom) >= 3);
const isPasswordValid = atom((get) => get(passwordLengthAtom) >= 3);

사용자가 양식을 제출할 수 있는지 여부를 제어하려면 아톰이 하나 더 필요합니다. 전체 형식이 유효한 상태인지 여부를 설명하는 일반적인 원자입니다.

const isFormValid = atom((get) => get(isNameValid) && get(isPasswordValid));

이 아톰은 이름 및 암호 유효성 검사 아톰에서 값을 파생하고 해당 값을 함께 결합합니다. 이 새로운 아톰을 사용하여 제출 버튼을 만들 준비가 된 것입니다.

const SubmitButton = () => {
  const isValid = useAtomValue(isFormValid);

  return (
    <Box>
      <Button disabled={!isValid} variant="outlined">
        Register
      </Button>
    </Box>
  );
};

양식이 유효하면 제출 버튼을 클릭할 준비가 된 것입니다. 양식이 유효하지 않으면 버튼이 비활성화됩니다. 단순한.

이제 전체 형태가 어떻게 보이는지 봅시다.

const Form = () => (
  <Box
    component="form"
    sx={{
      "& > :not(style)": { m: 2, width: "25ch" }
    }}
  >
    <Typography variant="h3" gutterBottom>
      Registration form
    </Typography>

    <Input label="Name" sourceAtom={nameAtom} />
    <Input type="password" label="Password" sourceAtom={passwordAtom} />

    <Error sourceAtom={isNameValid} errorInfo="Name is too short" />
    <Error sourceAtom={isPasswordValid} errorInfo="Password is too short" />

    <SubmitButton />
  </Box>
);

이 양식은 또한 새로운 일반Error 구성 요소를 사용하여 특정 오류를 표시합니다. 이 구성 요소의 소스를 보려면 full code을 확인하십시오.

항상 그렇듯이 Jotai 코드의 문서 및 더 많은 예제를 확인하려면 Jotai website 확인하십시오.