FormToggle — это простой переключатель, используемый для включения или отключения одной настройки. Этот компонент позволяет пользователям переключать параметры, при этом изменения сразу вступают в силу. Это делает его подходящим для мгновенного включения/выключения функций, таких как активация темы, отображение фона и другие настройки.
Принципы Использования FormToggle
Когда использовать FormToggle:
- Используйте FormToggle для мгновенного включения/отключения опции.
- Подходит для ситуаций, когда нет необходимости в отправке формы для активации изменений.
Пример использования для настройки «Закрепленный фон»:
import { FormToggle } from '@wordpress/components';
const FixedBackgroundToggle = () => {
return (
<FormToggle
checked={true}
onChange={() => console.log("Закрепленный фон переключен")}
/>
);
};
export default FixedBackgroundToggle;
Параметры компонента FormToggle
FormToggle принимает следующие параметры для настройки поведения и внешнего вида:
1. checked
- Тип: Boolean
- Обязательный: Нет
- Описание: Если
checkedравноtrue, переключатель будет включен. Еслиfalse, переключатель будет выключен. Если параметр не передан, переключатель по умолчанию будет выключен.
checked={true}
2. disabled
- Тип: Boolean
- Обязательный: Нет
- Описание: Если
disabledравноtrue, переключатель будет отключен (недоступен для взаимодействия) и отобразится с соответствующим стилем. Это полезно для случаев, когда опция временно недоступна.
disabled={true}
3. onChange
- Тип: Функция
(event: ChangeEvent<HTMLInputElement>) => void - Обязательный: Да
- Описание: Функция, вызываемая при каждом изменении состояния переключателя. Позволяет обработать переключение (например, обновить состояние или выполнить действие).
onChange={(event) => console.log("Переключено в состояние:", event.target.checked)}
Пример 1: Базовый переключатель с состоянием
В этом примере FormToggle используется для переключения состояния компонента.
import { useState } from 'react';
import { FormToggle } from '@wordpress/components';
const BasicToggle = () => {
const [isActive, setIsActive] = useState(false);
return (
<div>
<label>Функция активирована:</label>
<FormToggle
checked={isActive}
onChange={() => setIsActive(!isActive)}
/>
</div>
);
};
export default BasicToggle;
Пример 2: Переключатель для режима «Только чтение»
В данном примере переключатель используется для настройки режима «Только чтение». Когда параметр disabled установлен в true, переключатель становится неактивным и пользователь не может его изменить.
import { FormToggle } from '@wordpress/components';
const ReadOnlyToggle = () => {
return (
<div>
<label>Режим "Только чтение":</label>
<FormToggle
checked={true}
disabled={true}
onChange={() => console.log("Этот переключатель недоступен")}
/>
</div>
);
};
export default ReadOnlyToggle;
Пример 3: Переключатель с функцией onChange для отображения состояния
Этот пример демонстрирует, как использовать функцию onChange для обработки события переключения и отображения состояния в консоли.
import { useState } from 'react';
import { FormToggle } from '@wordpress/components';
const ToggleWithConsole = () => {
const [isEnabled, setIsEnabled] = useState(false);
const handleToggle = (event) => {
setIsEnabled(event.target.checked);
console.log("Переключатель:", event.target.checked ? "Включен" : "Выключен");
};
return (
<div>
<label>Включить опцию:</label>
<FormToggle
checked={isEnabled}
onChange={handleToggle}
/>
</div>
);
};
export default ToggleWithConsole;
Пример 4: Переключатель с настраиваемой функцией для обновления глобального состояния
Если вам нужно изменить глобальное состояние или выполнить сложное действие, вы можете настроить onChange для обработки данных в функции.
import { useState } from 'react';
import { FormToggle } from '@wordpress/components';
const GlobalStateToggle = ({ updateSetting }) => {
const [isFeatureEnabled, setFeatureEnabled] = useState(false);
const toggleFeature = () => {
const newStatus = !isFeatureEnabled;
setFeatureEnabled(newStatus);
updateSetting(newStatus); // Обновление глобального состояния
};
return (
<div>
<label>Активировать специальную функцию:</label>
<FormToggle
checked={isFeatureEnabled}
onChange={toggleFeature}
/>
</div>
);
};
export default GlobalStateToggle;
Заключение
Компонент FormToggle — это простой и удобный способ управления параметрами, которые пользователь может мгновенно включать или отключать. FormToggle легко интегрируется в формы и панели настроек WordPress, обеспечивая гибкость и функциональность.