在crazystack Next.js中创建类别
#javascript #react #nextjs #braziliandevs

在此类中，您将学习如何使用React创建类别的交互式形式。提供的过程说明了类别创建表格的实现，用户可以在其中插入该类别的名称并选择是否活动。

上课时，您将了解以下选项卡：

  1. 开发环境的配置反应。
  2. 创建可重复使用的组件，例如koud0，koud1和Checkbox。
  3. 使用个性化钩子（例如useCreateCategory）来管理形式及其相互作用的状态。
  4. 使用koud4验证形式数据。
  5. 使用koud5和koud6的事件操纵和状态更新。
  6. 使用handleSubmit和handleCreateCategory提交行动的形成和处理。
  7. 使用Koud9之间的路线之间导航。

在班级结束时，除了对可重复使用的组件的发展和使用个性化的使用更健康的理解外，您还将有关于如何在React中创建互动配方剂的实用知识。

该课程的视频将很快在Bootcamp Crazystack上发布，如果您仍然没有确保您的位置单击aqui

介绍的介绍是指使用React的类别创建表格的实现。让我们看一下路的每个部分：

  1. 依赖的重要性： 
import { CategoryProps } from "entidades/category";
import { useCreateCategory } from "./createCategory.hook";
import { BoxCreateItem, FormControl, Checkbox, GridForm } from "shared/ui";

在本节中，导入对表单实现的必要依赖性。这包括Koud10的定义，该定义是一个个性化的useCreateCategory挂钩，用于管理表单状态，除了可重复使用的组件（例如shared/ui软件包）等可重复使用的组件，例如Koud0，Koud1，Checkbox和GridForm。

。

。
  1. CreateCategoryForm组件： 
export const CreateCategoryForm = () => {
  const { formState, register, handleSubmit, handleCreateCategory, active, setActive } =
    useCreateCategory();
  return (
    // Conteúdo do formulário
  );
};

在这里，我们具有CreateCategoryForm组件的定义，该组件是没有Parano的组件函数。在功能中，由useCreateCategory钩返回的值的破坏。这些值包括formState来管理表单状态，register注册表单字段，handleSubmit，以处理表格的发送，handleCreateCategory以执行类别创建诉讼诉讼操作，active，以控制“活动”复选框的状态和setActive更新复选框的状态。

  1. BoxCreateItem组件： 
<BoxCreateItem
  onSubmit={handleSubmit(handleCreateCategory)}
  title={"Createar categoria"}
  isLoadingSaveButton={formState.isSubmitting}
  cancelRoute={"/categorys/1"}
>
  // Conteúdo interno do BoxCreateItem
</BoxCreateItem>

在此段落中，构成了BoxCreateItem组件。它涉及表单的所有容器，并具有定义组件的行为和理由的属性。属性包括onSubmit，该属性定义了通过发送表单title来调用的函数，该表单定义了组件椅子上显示的标题Koud30，该标题指示保存按钮是否处于加载状态，而Koud9（定义路线）将用户重定向到取消表格。

  1. GridForm组件： 
<GridForm>
  // Conteúdo interno do GridForm
</GridForm>

在BoxCreateItem组件中，我们具有koud15组件，该组件用于在网格中组织形式字段。它涉及表单的字段并提供令人愉悦的视觉结构。

  1. FormControl组件： 
<FormControl
  label="Nome da categoria"
  error={formState.errors.name}
  {...register("name")}
/>

在这里，我们有代表表单字段的FormControl组件。他收到了诸如label之类的属性，该属性定义了该字段旁边显示的章节error，该章节显示出错误消息（如果发明的验证）和{...register("name")}，该章节以useCreateCategory Hook控制的“名称”字段记录了“名称”字段。

  1. componente Checkbox： 
<Checkbox
  label="Ativo"
  colorScheme="green"
  isChecked={active}
  onChange={(e) => {
    e.preventDefault();
    setActive(e.target.checked);
  }}
/>

最后，我们拥有代表选择框的Checkbox组件。它接收了诸如label之类的属性，该属性定义了Selection Box旁边显示的文本Koud44，该文本定义了组件的配色方案Koud45，该方案指示了选择框是标记还是否，并且onChange，该函数定义为要称为函数。当更改复选框状态时。

以这种方式，介绍了如何使用React和可重复使用的组件创建一种交互式类别形式的实践示例。有了它，可以收集信息，验证字段并执行类别的创建行动。

CreateCategoryForm（Cã³digofinal） 

import { CategoryProps } from "entidades/category";
import { useCreateCategory } from "./createCategory.hook";
import { BoxCreateItem, FormControl, Checkbox, GridForm } from "shared/ui";

export const CreateCategoryForm = () => {
  const { formState, register, handleSubmit, handleCreateCategory, active, setActive } =
    useCreateCategory();
  return (
    <BoxCreateItem
      onSubmit={handleSubmit(handleCreateCategory)}
      title={"Createar categoria"}
      isLoadingSaveButton={formState.isSubmitting}
      cancelRoute={"/categorys/1"}
    >
      <GridForm>
        <FormControl
          label="Nome da categoria"
          error={formState.errors.name}
          {...register("name")}
        />
        <Checkbox
          label="Ativo"
          colorScheme="green"
          isChecked={active}
          onChange={(e) => {
            e.preventDefault();
            setActive(e.target.checked);
          }}
        />
      </GridForm>
    </BoxCreateItem>
  );
};

请参阅以下内容：

createCategory lib（最终代码） 

import { SubmitHandler, useForm } from "react-hook-form";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
export type CreateCategoryFormData = {
  name: string;
  active?: boolean;
};

export type SubmitCreateCategoryHandler = SubmitHandler<CreateCategoryFormData>;

export const createCategoryFormSchema = yup.object().shape({
  name: yup.string().required("Nome é obrigatório"),
});

export const useCreateCategoryLib = () => {
  const formProps = useForm<CreateCategoryFormData>({
    resolver: yupResolver(createCategoryFormSchema),
    defaultValues: {
      name: "",
    },
  });
  return { ...formProps };
};

提供的代码是指包含类别形式的验证和验证方案的库（CreateCategory Lib）。让我们详细查看代码的每个部分：

  1. 依赖的重要性： 
import { SubmitHandler, useForm } from "react-hook-form";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";

在本节中，导入对库功能的必要依赖性。这包括react-hook-form软件包的Koud48和Koud49，以管理状态并处理表格的发送，yup以定义验证方案和Koud52，以求解Koud48中的验证方案。 /p>>

  1. 类型和接口： 
export type CreateCategoryFormData = {
  name: string;
  active?: boolean;
};

export type SubmitCreateCategoryHandler = SubmitHandler<CreateCategoryFormData>;

在本节中，定义了库的类型。 CreateCategoryFormData代表类别创建表格中的数据，其中包含name字段string和可选的字段active type boolean。 SubmitCreateCategoryHandler是一种代表表单发送的操纵函数的类型。

  1. 验证方案： 
export const createCategoryFormSchema = yup.object().shape({
  name: yup.string().required("Nome é obrigatório"),
});

在这里，使用koud51定义了验证方案。 createCategoryFormSchema方案是一个对象，指定name字段的验证规则。在这种情况下，可以确定该字段是一个字符串，如果相反，将显示错误消息“名称是义务”。

  1. 个性化的挂钩useCreateCategoryLib： 
export const useCreateCategoryLib = () => {
  const formProps = useForm<CreateCategoryFormData>({
    resolver: yupResolver(createCategoryFormSchema),
    defaultValues: {
      name: "",
    },
  });
  return { ...formProps };
};

在这里，定义了个性化的钩useCreateCategoryLib。此钩返回一个包含构造器属性和相关功能的对象。在钩子内，useForm用于初始化表单的状态。这是使用koud67的两个参数：使用koud52来解决先前定义的验证方案和定义表单初始值的koud69，在这种情况下，只有空的koud55字段。

。

在组件中调用koud63时，您将可以访问表单的所有属性和功能，例如表单状态（formState），字段记录（register），即发送表单的fun§ （handleSubmit）和与形式状态有关的其他属性。

此库促进了类别创建表格的创建和验证，为数据处理和验证提供了列出且一致的结构。字段。

CreateCategory Hook

请参阅挂钩代码：

import { useUi } from "shared/libs";
import {
  CreateCategoryFormData,
  SubmitCreateCategoryHandler,
  useCreateCategoryLib,
} from "./createCategory.lib";
import { useRouter } from "next/router";
import { api } from "shared/api";
import { useMutation } from "@tanstack/react-query";
import { useState } from "react";
export const useCreateCategory = () => {
  const { showModal } = useUi();
  const router = useRouter();
  const [active, setActive] = useState(false);
  const createCategory = useMutation(async (category: CreateCategoryFormData) => {
    try {
      const { data } = await api.post("/category/add", {
        ...category,
      });
      if (!data) {
        showModal({
          content: "Ocorreu um erro inesperado no servidor, tente novamente mais tarde",
          title: "Erro no servidor",
          type: "error",
        });
        return;
      }
      showModal({
        content:
          "Categoria criada com sucesso, você será redirecionado para a lista de categorias",
        title: "Sucesso",
        type: "success",
      });
      router.push("/categorys/1");
      return data;
    } catch (error) {
      showModal({
        content: "Ocorreu um erro inesperado no servidor, tente novamente mais tarde",
        title: "Erro no servidor",
        type: "error",
      });
    }
  }, {});
  const { register, handleSubmit, formState } = useCreateCategoryLib();
  const handleCreateCategory: SubmitCreateCategoryHandler = async (
    values: CreateCategoryFormData
  ) => {
    await createCategory.mutateAsync({ ...values, active });
  };
  return { formState, register, handleSubmit, handleCreateCategory, active, setActive };
};

呈现的演示文稿是一个个性化的挂钩，称为useCreateCategory，它包含停机时间和功能以创建新类别。让我们详细查看代码的每个部分：

  1. 依赖的重要性： 
import { useUi } from "shared/libs";
import {
  CreateCategoryFormData,
  SubmitCreateCategoryHandler,
  useCreateCategoryLib,
} from "./createCategory.lib";
import { useRouter } from "next/router";
import { api } from "shared/api";
import { useMutation } from "@tanstack/react-query";
import { useState } from "react";

在本节中，导入对钩子操作的必要依赖性。这包括koud76从koud79文件显示模式，koud54和koud59，以处理表单的类型和处理，koud80以获取next.js路由对象，api，api以拨打电话âapi和useMutation react-query套件以管理数据突变。 。

  1. 个性化的挂钩useCreateCategory： 
export const useCreateCategory = () => {
  const { showModal } = useUi();
  const router = useRouter();
  const [active, setActive] = useState(false);
  const createCategory = useMutation(async (category: CreateCategoryFormData) => {
    // Lógica de criação de categoria
  }, {});
  const { register, handleSubmit, formState } = useCreateCategoryLib();
  const handleCreateCategory: SubmitCreateCategoryHandler = async (
    values: CreateCategoryFormData
  ) => {
    // Função de manipulação do envio do formulário
  };
  return { formState, register, handleSubmit, handleCreateCategory, active, setActive };
};

在这里，定义了个性化的挂钩useCreateCategory。此钩返回一个包含属性和相关功能和类别创建的对象。让我们看一下每个部分：

  • const { showModal } = useUi();：在这里，它被useUi的koud87中断，这是用于在接口中显示模式的钩子。

  • const router = useRouter();：在这里，Next.js Hook useRouter用于获取路由对象，该对象使您可以在类别创建之后重定向用户。li> li>

  • const [active, setActive] = useState(false);：在这里，挂钩koud92用于管理active字段的状态，该状态表示该类别是否处于活动状态。初始值定义为false。

  • const createCategory = useMutation(async (category: CreateCategoryFormData) => { ... }, {});：在这里，react-query软件包的useMutation用于创建一个小小的。突变的功能是一个AshOnchonsous函数，该功能将类别的数据作为参数接收，并执行类别创建的方式。使用api.post进行了调用âapi，然后根据呼叫的结果显示模态成功或错误。最后，router.push功能用于重定向类别列表的用户。空对象{}传递，因为第二个参数是可选的，并且允许op

    • 的配置

其他突变。

  • const { register, handleSubmit, formState } = useCreateCategoryLib();：在这里，先前导入的挂钩useCreateCategoryLib用于获得与类别形式相关的属性和功能。

  • const handleCreateCategory: SubmitCreateCategoryHandler = async (values: CreateCategoryFormData) => { ... };：在这里，定义了handleCreateCategory函数，该函数将在发送表单时被调用。此函数将表单的值作为参数接收，并称为createCategory.mutateAsync的函数以创建具有所提供值和状态active的类别。

  • return { formState, register, handleSubmit, handleCreateCategory, active, setActive };：最后，必要的属性和功能返回到将使用Hook useCreateCategory的组件。

这个个性化的挂钩封装了类别的方式，促进了不同组件的使用和重复使用，提供了必要的功能和状态来操纵创建类别的形式，显示模式并重定向用户使用该类别。

类别createpage

最后，我们拥有调用所有这些Trambolho的Phagin代码：

import { Box, Head } from "shared/ui";
import { CategoryProps } from "entidades/category";
import { CreateCategoryForm } from "features/category/create";

export const CategoryCreatePage = () => {
  return (
    <>
      <Head
        title={"Belezix Admin | Categorias"}
        description="Página de criação de categorias do painel de Admin Belezix"
      />
      <Box flex="1" borderRadius={8} bg="purple.800" p="8">
        <CreateCategoryForm />
      </Box>
    </>
  );
};

介绍的介绍定义了一个称为CategoryCreatePage的组件，该组件代表类别育种页面。让我们详细查看代码的每个部分：

  1. 依赖的重要性： 
import { Box, Head } from "shared/ui";
import { CategoryProps } from "entidades/category";
import { CreateCategoryForm } from "features/category/create";

在本节中，对p的功能的必要依赖性。这包括“共享/UI”软件包的Koud110和Koud111等组件，以构造PADGA并定义标题和描述，从“实体/类别”文件中的CategoryProps的高位来处理与类别相关的类型，以及CreateCategoryForm的CreateCategoryForm文件“功能/类别/创建”是类别创建的形式。

  1. 组件CategoryCreatePage： 
export const CategoryCreatePage = () => {
  return (
    <>
      <Head
        title={"Belezix Admin | Categorias"}
        description="Página de criação de categorias do painel de Admin Belezix"
      />
      <Box flex="1" borderRadius={8} bg="purple.800" p="8">
        <CreateCategoryForm />
      </Box>
    </>
  );
};

在这里，定义了代表类别育种页面的CategoryCreatePage组件。该组件呈现pamy的主要包含，包括椅子和类别创建表格。

  • <Head ... />：Head组件用于定义HTML文档目标，例如标题和Padgina的描述。在这种情况下，标题定义为“ belezix admin |类别”，并且描述定义为“管理员belezix”类别类别的“类别”。< /p> < /li>

  • <Box ... />：Box组件用于创建一个围绕PAM遏制的矩形盒子。它定义了一些属性，例如Koud120，Koud121，Koud122和Koud123，以设置盒子。在示例中，盒子的灵活性为1，8像素边缘半径，深紫色背景颜色（紫色800）和8像素的内部空间。

  • <CreateCategoryForm />：CreateCategoryForm组件被导入并在框中渲染。它代表类别创建表格，允许用户输入必要的数据以创建新类别。

简而言之，CategoryCreatePage组件代表类别育种页面。它包括一个带有标题和描述的允许，并在样式化框中渲染类别创建表格。这为Padga提供了一个基本结构，并可以在系统中创建新类别。

简而言之

在此类中，我们探讨了管理系统中类别管理功能的开发。在整个班级中，我们接近开发的不同方面，从创建组件和手续到与API集成和错误处理。

我们开始理解类别管理功能的基本结构，确定所涉及的主要实体，例如Koud10。然后，我们讨论了类别编辑表格的创建，详细介绍了EditCategoryForm，EditCategoryLib和EditCategoryHook组件。这些组件负责管理表单状态，数据验证以及与API的通信以更新类别。

此外，我们还使用Koud17，Koud132和Koudde133组件探索了类别创建表格的开发。这些组件遵循类似于编辑形成的结构，并具有新类别的功能。

为了确保享受的友好体验，我们解决了API请求期间错误的处理，并在失败时显示适当的错误消息。我们使用“共享/libs”软件包的Koud87组件来显示这些消息。

此外，我们还使用“ Next/Router” useRouter讨论了页面之间的路由，以将用户重定向类别之后的类别列表。

。

在上课期间，我们了解了使用诸如react-hook-form和yup之类的流行库来促进配方管理和数据验证。我们还探索react-query库，以促进与API的通信并管理数据状态。

在班级结束时，我们有机会使用先前开发的组件并将其集成到完整的垫子中。

通过此类，我们扩展了对反应应用中复杂特征发展的知识。我们了解了组件的结构，国家管理，与API的集成以及错误处理。这些技能对于未来项目的发展将很有价值。

恭喜您在这里的进度！您现在准备将这些知识应用于自己的项目，并继续提高开发人员的反应技巧。

疯狂的挑战

启发挑战：实施类别排除功能

现在您已经熟悉了创建和类别编辑的功能，让我们提出一个挑战以进一步改善现有代码。

在此挑战中，您应该实施排除类别的功能。为此，请按照以下步骤：

  1. 在Koud140文件夹中创建一个名为Koud139的新组件。此组件将负责显示类别排除按钮。

  2. 在DeleteCategoryButton组件中，添加一个称为Koud142的建议，以接收将排除的类别的ID。

  3. 在DeleteCategoryButton组件中，使用shared/ui软件包的AlertDialog组件在排除类别之前显示确认日记。日记应显示确认消息，因为“您确定要删除此类别吗？”享受将可以选择或取消排除。

  4. 在DeleteCategoryButton组件中，使用@tanstack/react-query软件包中的Koud82执行类别的排除。确认排除时，您提出请求将其删除到API，传递要排除的类别的ID。

  5. 在排除类别期间可能会处理可能的成功和错误场景。使用shared/libs软件包中的koud87显示成功的消息或享受的错误。

  6. 更新Koud128组件以在编辑表格下方包含DeleteCategoryButton组件。将当前类别的categoryId传递为DeleteCategoryButton组件的道具。

  7. 在CategoryEditPage pange中，导入koud139组件并将categoryId传递到组件。

  8. 在CategoryCreatePage pange中，添加一个取消按钮将用户重定向到类别列表。使用next/router软件包的useRouter执行重定向。

完成挑战后，您将实现排除类别的功能，从而允许用户删除现有类别。这将为您的管理系统中的类别管理提供更完整，更强大的体验。

记住要仔细测试您的实现，并确保所有功能正常工作。祝您好运，并进行有趣的编码！