Пошаговый шаг: Devextreme Как установить опцию «Выбранная радиопапа

DeVextreme от DeVexPress-это библиотека, полная готовых к использованию компонентов пользовательского интерфейса для веб-приложений. Он работает с углованием, реагированием, VUE и даже JQUERY. Одним из его популярных виджетов является радиограмра , которая позволяет пользователям выбирать один вариант из списка.

В формах, страницах настроек или на информационных панелях радиограмра помогает пользователям выбирать только один ответ. Например, вы можете позволить им выбирать между «ежемесячным планом» и «годовым планом». Чтобы приложение чувствовал себя гладким, разработчики часто хотят установить выбор по умолчанию или предварительно выбрать значение. Вот где входит свойство стоимости в радиогруппе.

Что такое рентгенограмма DeVextreme?

Виджет радиогруппы - это простой, но мощный входной элемент управления. Это требует данных (например, списка массива или JSON) и показывает радиопроизводительные кнопки для каждого элемента. Затем пользователи могут нажать, чтобы выбрать один. В отличие от флажковой группы , где можно выбрать несколько элементов, радиогруппа допускает только один выбор за раз.

Разработчики обычно заботятся о двух вещах: что является выбранным элементом и как правильно его установить. Виджет отслеживает текущий выбор через свойство Value . Когда вы измените это свойство, выбранные элементы обновляются. Это работает во всех рамках - угловатых, реагирования, VUE и jQuery - поскольку виджет следует за тем же API.

Установите выбранное значение по умолчанию в радиогруппе

Настройка выбранного значения по умолчанию осуществляется через опцию значения при инициализации виджет. Вы передаете значение, которое соответствует одному из элементов в данных данных , и этот элемент отображается как предварительно выбранное.

Вот простой пример с использованием простого JavaScript с датой данных JSON:

$ («#RadiogroupContainer»). Dxradiogroup ({
Предметы: [«Базовые», «Стандарт», «Премиум»],
Значение: «Стандарт» // Выбранный по умолчанию
});

В этом примере параметр «Стандартный» уже будет выбран при загрузке страницы. Это полезно, если вы хотите направить пользователей к наиболее распространенному или рекомендуемому выбору.

Вы также можете связываться с объектами вместо простых струн. Например:

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

Программно изменить выбранное элемент

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

В DeVextreme это делается путем обновления свойства значения радиограммы. Если вы создали виджет с jQuery, вы можете позвонить Option (), чтобы изменить его во время выполнения.

Пример:

Когда вызов Option («Значение»,…) работает, радиогруппа мгновенно выделяет «премиум». Это работает в угловой, реагировании и Vue также - в этих структурах вы обычно связываете значение с состоянием или переменной. Когда это состояние меняется, выбранные элементы обновляются автоматически.

Этот подход полезен для форм, где выбор зависит от других вводов. Например, если пользователь выбирает «бизнес -аккаунт», вы можете автоматически установить радиогруппу на «Годовой план» вместо «ежемесячного плана».

Обработка события OnValueChanged

Установка значения является одной из сторон истории. Захват взаимодействия с пользователем является другим. Событие OnValueChanged в DeVextreme позволяет вам реагировать всякий раз, когда пользователь меняет свой выбор.

Вот простой пример:

Всякий раз, когда пользователь выбирает другой план, консоль печатает новое значение. Это событие является ключом, когда вы хотите обновить другие части страницы или отправить выбор обратно в базу данных.

В рамках это работает так же, но следует за их моделями событий. Например, в React вы можете использовать состояние и выполнять функцию обработчика, которая стреляет при изменении радиогруппы. В Angular или Vue вы можете напрямую связаться с двусторонним привязкой данных и использовать выход события для отслеживания изменений.

Думайте о том, как он является вашим «слушателем». Он соединяет действие пользователя с вашей бизнес -логикой - например, показ другой цены, включение кнопки или настройка связанных полей. Без этого радиогруппа будет отображать только параметры, не позволяя остальной части вашего приложения знать, что выбрал пользователь.

Примеры специфичных для фреймворта

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

1. Угловой пример:

В Angular вы обычно связываете значение с свойством компонента.

<dx-radio-группа
[items] = ”['basic', 'standard', 'Premium']"
[(значение)] = ”SelectedPlan»>
</dx-radio-группа>

Здесь selectedPlan в вашем файле TypeScript, какой элемент выбран. Если вы измените selectedPlan , радиогруппа сразу же обновляет.

2. Реагировать пример:

React использует контролируемые компоненты, поэтому вы обрабатываете выбор с состоянием.

Когда пользователь выбирает другой план, setPlan обновляет состояние, а радиогруппа показывает новый выбор.

3. Пример VUE:

Vue облегчает v-model .

Изменение selectedPlan в вашем VUE мгновенно обновляет радиогруппу.

4. jQuery Пример:

jQuery прост, потому что вы просто создаете экземпляр и устанавливаете значение.

Устранение неполадок общих проблем

Даже с простыми виджетами все может пойти не так. Вот наиболее распространенные проблемы, с которыми сталкиваются разработчики:

• Значение не обновляется: это обычно происходит, когда установленное значение, которое вы устанавливаете, не соответствует valueExpr в вашем данных. Например, если ваш данных использует id , но вместо этого вы пытаетесь установить текст, ничего не изменится.
• Несколько радиогрупп в одной форме: если вы используете одно и то же привязка данных для двух виджетов, они могут мешать друг другу. Всегда используйте уникальные привязки или отдельное состояние для каждой группы.
• Проблемы стиля или макета: иногда радиогруппа не выглядит прямо внутри форм или сетей. Убедитесь, что в контейнере достаточно места, и CSS не переопределяет стили DeVextreme.

Большинство из этих вопросов сводятся к несоответствующим ценностям или отсутствующим привязкам. Проверка вашего value , valueExpr и dataSource обычно решает их.

Заключение

Виджет радиогруппы в DeVextreme - это простой, но важный инструмент. Вы используете свойство Value , чтобы установить опцию по умолчанию («значение») , чтобы изменить его позже, и OnValueChanged для захвата действий пользователя. В угловом, React, Vue или jQuery метод одинаков - правильно свяжите значение, и он работает.

Если что -то не обновляет, проверьте привязку данных и убедитесь, что значение соответствует вашему данному дансу. Как только вы установите его правильно, радиогруппа станет плавным способом, чтобы заставить пользователей сделать желаемый выбор.