Как установить значение флажка по умолчанию в React
4 января 2024 г.Флажок — один из наиболее полезных входных данных для создания динамических приложений с помощью React. В этом руководстве мы увидим, как сделать флажок установленным (или снятым) по умолчанию.
Проверено по умолчанию
Как разработчик React, вы, вероятно, знакомы с JSX. Это язык шаблонов, позволяющий легко разрабатывать пользовательские интерфейсы в React. Его самым большим преимуществом является то, что большинство элементов и процессов разработки очень похожи на HTML.
Подобно HTML, вы можете установить атрибут defaultChecked для ввода флажка. Ему необходимо установить логическое значение. Если установлено значение true, флажок будет установлен автоматически. Если значение false или значение по умолчанию вообще отсутствует, флажок не будет установлен автоматически.
Давайте рассмотрим пример:
<input type="checkbox" defaultChecked="true" />
Это простой неконтролируемый флажок.
Атрибуту defaultChecked присвоено логическое значение true. В реальном мире для defaultChecked часто устанавливается логическое значение состояния или сложное условие, которое оценивается как true или false.< /п>
Установить значение по умолчанию для контролируемого флажка в React
В большинстве случаев лучше всего создавать контролируемые входные данные в React. Это входные данные, которые получают свое значение от состояния. Изменения флажка также обновляют его состояние.
Давайте посмотрим на живую демонстрацию управляемого флажка:
import "./styles.css";
import { useState } from "react";
export default function App() {
const [checkbox, setCheckbox] = useState(true);
const handleChange = (e) => setCheckbox(e.target.checked);
return (
<div>
<input type="checkbox" defaultChecked="true" onChange={handleChange} />
<p>Checkbox is {checkbox ? "checked" : "unchecked"}</p>
</div>
);
}
style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;"
title="clever-ives"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
При первой загрузке флажок установлен, поскольку для defaultChecked установлено значение true.
Обработчик событий отслеживает события изменения, получает доступ к текущему статусу (отмечено или нет) и сохраняет его в этом состоянии.
В этом случае мы не устанавливаем атрибут value для ввода. Атрибут defaultChecked приводит к уменьшению количества кода и работает так же.
Мы можем отслеживать текущее значение флажка и использовать его для условного стиля, рендеринга и других динамических функций в React. Например, вы можете использовать условное оформление для реализации темного режима.
Если вы хотите узнать больше, ознакомьтесь с моими руководствами по React с примерами. Я опубликовал несколько статей о работе с входными данными в React.
Оригинал