Привязка к элементам форм

Atomico — это современная библиотека для создания веб-компонентов на JavaScript с реактивной моделью данных. Одной из ключевых задач при работе с формами является синхронизация состояния компонентов с элементами формы, что позволяет управлять вводом пользователя и автоматически обновлять представление интерфейса.

Работа с атрибутами и свойствами

В Atomico любой компонент может получать свойства (props), которые напрямую связываются с атрибутами HTML-элементов. Для форм это особенно важно, так как значения полей должны корректно передаваться компоненту.

Пример привязки атрибута value текстового поля:

import { c, useState } from "atomico";

function TextInput({ value, onInput }) {
    return (
        <input
            type="text"
            value={value}
            onIn put={event => onInput(event.target.value)}
        />
    );
}

TextInput.props = {
    value: String,
    onInput: Function
};

Здесь value является реактивным свойством, которое обновляется при каждом вводе пользователя. Обработчик onInput обеспечивает двустороннюю связь между состоянием и отображением.

Использование useState для управления формой

Для локального управления состоянием форм Atomico предоставляет хук useState. Он позволяет хранить текущее значение поля и автоматически обновлять компонент при изменении состояния.

Пример текстовой формы с управлением:

function FormExample() {
    const [name, setName] = useState("");

    return (
        <form>
            <TextInput value={name} onIn put={setName} />
            <p>Введено: {name}</p>
        </form>
    );
}

Каждое изменение поля TextInput немедленно отражается в name, а компонент перерисовывается, показывая актуальное значение.

Двусторонняя привязка

В Atomico отсутствует встроенная директива типа v-model из Vue, но двусторонняя привязка реализуется через комбинацию props и обработчиков событий. Это особенно удобно для сложных форм, где требуется синхронизация между несколькими полями.

Пример чекбокса с двусторонней связью:

function Checkbox({ checked, onChange }) {
    return (
        <input
            type="checkbox"
            checked={checked}
            onCha nge={event => onChange(event.target.checked)}
        />
    );
}

Checkbox.props = {
    checked: Boolean,
    onChange: Function
};

function CheckboxForm() {
    const [agreed, setAgreed] = useState(false);

    return (
        <form>
            <Checkbox checked={agreed} onCha nge={setAgreed} />
            <p>Согласие: {agreed ? "да" : "нет"}</p>
        </form>
    );
}

Использование useState вместе с onChange позволяет сохранять состояние чекбокса и автоматически обновлять интерфейс.

Работа с группой элементов

Для групп радиокнопок или чекбоксов удобно использовать массив состояния и методы управления им. Atomico обеспечивает простую реактивность, что позволяет легко синхронизировать группу элементов с состоянием компонента.

Пример группы радиокнопок:

function RadioGroup({ options, selected, onSelect }) {
    return (
        <div>
            {options.map(option => (
                <label>
                    <input
                        type="radio"
                        name="group"
                        value={option}
                        checked={selected === option}
                        onCha nge={() => onSelect(option)}
                    />
                    {option}
                </label>
            ))}
        </div>
    );
}

RadioGroup.props = {
    options: Array,
    selected: String,
    onSelect: Function
};

function FormWithRadio() {
    const [selected, setSelected] = useState("option1");

    return (
        <form>
            <RadioGroup
                options={["option1", "option2", "option3"]}
                selected={selected}
                onSELECT={setSelected}
            />
            <p>Выбрано: {selected}</p>
        </form>
    );
}

Такой подход позволяет хранить состояние выбора и поддерживать актуальность интерфейса без ручного манипулирования DOM.

Валидация и привязка

Привязка значений форм в Atomico упрощает валидацию на лету. Состояние поля можно проверять сразу после ввода и обновлять компонент с отображением ошибок.

Пример простой валидации:

function ValidatedInput() {
    const [value, setValue] = useState("");
    const [error, setError] = useState("");

    function handleInput(val) {
        setValue(val);
        setError(val.length < 3 ? "Минимум 3 символа" : "");
    }

    return (
        <div>
            <input value={value} onIn put={e => handleInput(e.target.value)} />
            {error && <span style={{ color: "red" }}>{error}</span>}
        </div>
    );
}

Состояние error зависит от value, что делает реакцию интерфейса мгновенной и удобной для пользователя.

Привязка к <select> и множественным выборам

Для селектов Atomico позволяет синхронизировать выбранное значение через value и обработчик onInput:

function SelectInput({ options, value, onChange }) {
    return (
        <select value={value} onIn put={e => onChange(e.target.value)}>
            {options.map(opt => (
                <option value={opt}>{opt}</option>
            ))}
        </select>
    );
}

SelectInput.props = {
    options: Array,
    value: String,
    onChange: Function
};

function FormWithSelect() {
    const [selected, setSelected] = useState("one");

    return (
        <form>
            <SelectInput
                options={["one", "two", "three"]}
                value={selected}
                onCha nge={setSelected}
            />
            <p>Выбрано: {selected}</p>
        </form>
    );
}

Для множественного выбора можно использовать массив и метод includes для отслеживания выбранных элементов.

Итоговое замечание по привязке к формам

Система привязки Atomico строится на реактивных свойствах компонентов и хуках состояния, что позволяет создавать управляемые формы любой сложности. Комбинация props, обработчиков событий и useState обеспечивает синхронизацию интерфейса с данными без прямого манипулирования DOM, делая компоненты чистыми, модульными и легко тестируемыми.

Оглавление