Управление состоянием

Chakra UI предоставляет гибкие средства управления состоянием компонентов, обеспечивая удобное и декларативное создание интерактивных интерфейсов. Основные механизмы управления состоянием основаны на хуках React, расширенных утилитами Chakra UI для упрощения логики управления модальными окнами, аккордеонами, селектами и другими интерактивными элементами.

Хуки состояния в Chakra UI

useDisclosure – ключевой хук для управления видимостью элементов, таких как модальные окна, выпадающие списки или боковые панели. Возвращает объект с полями:

const { isOpen, onOpen, onClose, onToggle } = useDisclosure();
  • isOpen – булево значение, указывающее, открыт элемент или нет.
  • onOpen – функция для открытия элемента.
  • onClose – функция для закрытия элемента.
  • onToggle – переключает состояние элемента.

Пример использования для модального окна:

import { Button, Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalFooter, useDisclosure } from "@chakra-ui/react";

function ExampleModal() {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <>
      <Button onCl ick={onOpen}>Открыть модал</Button>
      <Modal isOpen={isOpen} onCl ose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Заголовок модала</ModalHeader>
          <ModalBody>Содержимое модала</ModalBody>
          <ModalFooter>
            <Button onCl ick={onClose}>Закрыть</Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </>
  );
}

useBoolean – упрощённое управление булевыми состояниями. Позволяет легко переключать состояния, включать или отключать их:

const [flag, setFlag] = useBoolean();

<Button onCl ick={setFlag.toggle}>Переключить</Button>
<Button onCl ick={setFlag.on}>Включить</Button>
<Button onCl ick={setFlag.off}>Выключить</Button>

Управление формами и полями

Chakra UI интегрируется с React Hook Form и предоставляет собственные компоненты для удобного связывания полей с состоянием. Основные компоненты:

  • FormControl – контейнер для поля формы, позволяет управлять ошибками, метками и доступностью.
  • FormLabel – отображение метки поля.
  • Input, Textarea, Select, Checkbox, Radio – элементы управления.

Пример:

import { FormControl, FormLabel, Input, FormErrorMessage, Button } from "@chakra-ui/react";
import { useState } from "react";

function ExampleForm() {
  const [value, setValue] = useState("");
  const isError = value === "";

  return (
    <form>
      <FormControl isInvalid={isError}>
        <FormLabel>Имя</FormLabel>
        <Input value={value} onCha nge={(e) => setValue(e.target.value)} />
        {isError && <FormErrorMessage>Поле обязательно</FormErrorMessage>}
      </FormControl>
      <Button mt={4} colorScheme="teal" type="submit" disabled={isError}>
        Отправить
      </Button>
    </form>
  );
}

Аккордеоны, табы и другие интерактивные компоненты

Множество компонентов Chakra UI имеют встроенные хуки состояния, которые позволяют управлять их поведением без написания сложной логики.

Аккордеон:

import { Accordion, AccordionItem, AccordionButton, AccordionPanel, AccordionIcon } from "@chakra-ui/react";

<Accordion allowToggle>
  <AccordionItem>
    <h2>
      <AccordionButton>
        <Box flex="1" textAlign="left">Секция 1</Box>
        <AccordionIcon />
      </AccordionButton>
    </h2>
    <AccordionPanel pb={4}>
      Содержимое первой секции
    </AccordionPanel>
  </AccordionItem>
</Accordion>
  • allowToggle – позволяет открывать только одну секцию за раз.
  • Управление состоянием аккордеона можно расширять с помощью index и onChange.

Табы:

import { Tabs, TabList, TabPanels, Tab, TabPanel } from "@chakra-ui/react";

<Tabs>
  <TabList>
    <Tab>Tab 1</Tab>
    <Tab>Tab 2</Tab>
  </TabList>

  <TabPanels>
    <TabPanel>Содержимое 1</TabPanel>
    <TabPanel>Содержимое 2</TabPanel>
  </TabPanels>
</Tabs>
  • Состояние активной вкладки можно контролировать через пропсы index и onChange, что позволяет синхронизировать его с внешним состоянием приложения.

Управление состоянием цветов и тем

useColorMode – хук для управления светлой и тёмной темой:

const { colorMode, toggleColorMode } = useColorMode();

<Button onCl ick={toggleColorMode}>
  {colorMode === "light" ? "Переключить на тёмную" : "Переключить на светлую"}
</Button>
  • colorMode – текущее состояние темы ("light" или "dark").
  • toggleColorMode – переключение между режимами.
  • Поддерживает интеграцию с локальным хранилищем и контекстом приложения.

Советы по организации состояния

  1. Локальное vs глобальное состояние:

    • Локальное состояние удобно для управления отдельными компонентами (useDisclosure, useBoolean).
    • Глобальное состояние стоит использовать через React Context или внешние менеджеры (Redux, Zustand) для синхронизации состояний между разными частями интерфейса.

  2. Согласованность UI:

    • Компоненты Chakra UI по умолчанию следуют принципам доступности и согласованного UX, что упрощает управление состоянием.

  3. Комбинирование хуков:

    • Один компонент может использовать несколько хуков одновременно, например useDisclosure для модала и useColorMode для изменения темы.

Chakra UI предоставляет мощный и декларативный подход к управлению состоянием, позволяя создавать сложные интерфейсы с минимальной ручной логикой. Использование встроенных хуков и компонентов упрощает разработку и делает код более читаемым и поддерживаемым.

Оглавление