Компонент Disabled в библиотеке WordPress предназначен для деактивации всех вложенных элементов, которые могут быть выбраны с помощью табуляции или взаимодействия мышью. Это удобный способ временно отключить поля ввода и кнопки без необходимости прописывать для каждого элемента disabled.
Подключение компонента
Для использования компонента Disabled, импортируйте его из библиотеки компонентов WordPress:
import { useState } from 'react';
import { Button, Disabled, TextControl } from '@wordpress/components';
Базовый пример использования
В этом примере мы создадим компонент, который позволяет включать и отключать текстовое поле при помощи кнопки. Компонент TextControl отображается внутри Disabled только в случае, если состояние isDisabled установлено в true.
const MyDisabled = () => {
const [ isDisabled, setIsDisabled ] = useState(true);
const toggleDisabled = () => {
setIsDisabled((state) => !state);
};
return (
<div>
{isDisabled ? (
<Disabled>
<TextControl label="Имя" onChange={() => {}} />
</Disabled>
) : (
<TextControl label="Имя" onChange={() => {}} />
)}
<Button variant="primary" onClick={toggleDisabled}>
Переключить доступность
</Button>
</div>
);
};
Описание пропсов
Компонент Disabled поддерживает несколько параметров, которые позволяют настроить его поведение.
isDisabled(опциональный)- Тип:
boolean - Задает, следует ли отключить все вложенные элементы. По умолчанию параметр равен
true, что означает, что вложенные элементы будут заблокированы. При установкеfalseэлемент будет активен.
- Тип:
Пример использования с isDisabled в false:
<Disabled isDisabled={false}>
<TextControl label="Описание" />
</Disabled>
Пример с формой
В этом примере мы покажем, как можно временно отключить целую форму, чтобы предотвратить редактирование данных.
const FormExample = () => {
const [ isDisabled, setIsDisabled ] = useState(true);
return (
<div>
<Button onClick={() => setIsDisabled(!isDisabled)}>
{isDisabled ? "Разблокировать форму" : "Заблокировать форму"}
</Button>
<Disabled isDisabled={isDisabled}>
<TextControl label="Имя пользователя" onChange={() => {}} />
<TextControl label="Email" onChange={() => {}} />
<TextControl label="Телефон" onChange={() => {}} />
</Disabled>
</div>
);
};
Пример с контекстом Disabled
Disabled также предоставляет контекст Disabled.Context, позволяя вложенным компонентам проверять, заблокированы ли они. В следующем примере создадим кнопку, которая изменяет свою прозрачность в зависимости от состояния блокировки.
import { useContext } from 'react';
import { Button, Disabled } from '@wordpress/components';
const CustomButton = (props) => {
const isDisabled = useContext(Disabled.Context);
return (
<button
{...props}
style={{
opacity: isDisabled ? 0.5 : 1,
cursor: isDisabled ? "not-allowed" : "pointer",
}}
disabled={isDisabled}
>
{props.children}
</button>
);
};
const ContextExample = () => {
const [ isDisabled, setIsDisabled ] = useState(true);
return (
<div>
<Button onClick={() => setIsDisabled(!isDisabled)}>
{isDisabled ? "Включить кнопки" : "Отключить кнопки"}
</Button>
<Disabled isDisabled={isDisabled}>
<CustomButton>Кнопка 1</CustomButton>
<CustomButton>Кнопка 2</CustomButton>
</Disabled>
</div>
);
};
Поддержка старых браузеров
Для работы Disabled в браузерах, не поддерживающих атрибут inert, рекомендуется использовать полифилл WICG для обеспечения совместимости.
Заключение
Компонент Disabled в WordPress предоставляет простой и эффективный способ временно блокировать взаимодействие с вложенными элементами. Независимо от того, хотите ли вы отключить форму, временно заблокировать кнопки, или проверить статус блокировки с помощью Disabled.Context, этот компонент позволяет легко управлять доступностью элементов интерфейса.