Пример средства выбора Ionic React

Пример кода и подробные шаги, полученные из документации Ionic, для использования элемента управления Picker в вашем решении.

Обзор

Это пример приложения Ionic ReactJS, использующий Компонент IonPicker, полученный из простого примера javascript, представленного в Документации по сборщику Ionic Framework.

Мы также используем React Hooks для управления состоянием, а пример основан на шаблоне Ionic ReactJS, поэтому мы поддерживаем Typescript.

Настройка компонента

import React from “react”;
import { PickerColumn } from “@ionic/core”;
import { IonPicker } from “@ionic/react”;
/**
 * the component has three properties that are defined in this 
 * interface since we are using typescript
 */
interface _Props {
 isOpen : boolean
 onSave : Function
 onCancel : Function
}
const MyPicker: React.FC<_Props> = ({onSave, onCancel, isOpen}) => { 
 return <div></div>
}

Свойства средства выбора, которые будут обрабатываться

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

Что будет отображать сборщик

Настройка двух столбцов данных для компонента выбора. Так как этот компонент позволит пользователю выбрать день недели и время сеанса утром или днем

const DayColumn = {
 name: “Day”,
 options: [
   { text: “Monday”, value: “Monday” },
   { text: “Tuesday”, value: “Tuesday” },
   { text: “Wednesday”, value: “Wednesday” },
   { text: “Thursday”, value: “Thursday” },
   { text: “Friday”, value: “Friday” }
 ]
} as PickerColumn;

второй столбец

const SessionTimeColumn = {
 name: “SessionTime”,
 options: [
   { text: “Morning 8a — 12p”, value: “Morning” },
   { text: “Afteroon 1p — 5p”, value: “Afteroon” }
 ]
} as PickerColumn;

Визуализация содержимого компонента средства выбора

Мы используем компонент IonPicker и передаем ему соответствующие свойства. isOpen, который передается из родительского компонента. columns — это константы, которые мы создали выше DayColumn и SessionTimeColumn, а затем, наконец, buttons для доступных действий, которые может предпринять пользователь.

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

return (
 <div>
   <IonPicker
     isOpen={isOpen}
     columns={[DayColumn, SessionTimeColumn]}
     buttons={[
       {
         text: “Cancel”,
         role: “cancel”,
         handler: value => { onCancel() }
       },
       {
         text: “Confirm”,
         handler: value => { onSave(value) }
       }
     ]}>
   </IonPicker>
 </div>
);

Когда пользователь выбирает определенные элементы из средства выбора, ниже приведен пример объекта, возвращаемого функцией onSave. Это информация, которая будет передана родительскому компоненту при выполнении функции.

{
 “Day” : {
 “text”: “Wednesday”
 “value”: “Wednesday”
 “columnIndex”: 0
 },
 “SessionTime” : {
 “text”: “Morning 8a — 12p”
 “value”: “Morning”
 “columnIndex”: 1
 }
}

Рендеринг `MyPicker` в App.tsx

Нам нужен соответствующий импорт в файле App.tsx, чтобы использовать компонент MyPicker, а также реагировать на обработчики состояния, чтобы управлять видимостью средства выбора и отслеживать выбранные значения из средства выбора.

Дополнительная информация об использовании React Hooks https://reactjs.org/docs/hooks-state.html

import React, { useState } from “react”;
import “./Home.css”;
import MyPicker from “../components/MyPicker”;

Мы используем машинописный текст в этом примере реакции, поэтому полезно определить интерфейс ISessionTime для информации о состоянии, которую мы отслеживаем для выбора пользователя из компонента MyPicker.

export interface ISessionTime {
 weekday: string;
 period: string;
}

Для управления видимостью MyPicker мы используем функцию setPickerOpen, а значение состояния сохраняется в pickerIsOpen.

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

const [pickerIsOpen, setPickerIsOpen] = useState(false);
const [sessionTime, setSessionTime] = useState<ISessionTime | undefined>(
    undefined
  );

В пользовательском интерфейсе мы предоставляем две кнопки для взаимодействия с состоянием приложения.

«Select Session»: откроет компонент MyPicker, чтобы пользователь мог сделать выбор, установив переменную состояния pickerIsOpen.
«Очистить сеанс»: удалит все ранее выбранные значения из переменной состояния sessionTime.

<IonItem>
  <IonButton onClick={() => { setPickerIsOpen(true); }} >
    Select Session
  </IonButton>
  <IonButton onClick={() => { setSessionTime(undefined); }}>
    Clear Session
  </IonButton>
</IonItem>

Затем мы визуализируем еще один IonItem, где выбор пользователя отображается из переменной состояния sessionTime, и позволяем пользователю изменить выбор при щелчке элемента, вызывая setPickerIsOpen для обновления состояния и запуска рендеринга компонента MyPicker.

<IonItem onClick={() => { setPickerIsOpen(true); }} >
  {sessionTime ? (
    <IonLabel>
      {sessionTime?.weekday} - {sessionTime?.period}
    </IonLabel>
  ) : (
    <IonLabel className="placeHolder">Please Select Session</IonLabel>
  )}
</IonItem>

Наконец, мы визуализируем фактический компонент MyPicker, используя переменные состояния и соответствующие функции, переданные как свойства.

В обработчике события onCancel мы устанавливаем состояние свойства pickerIsOpen с помощью setPickerIsOpen(false).

В onSave нам нужно установить результаты из MyPicker в локальное состояние, используя setSessionTime, а также установить видимость средства выбора setPickerIsOpen(false)

<MyPicker
  isOpen={pickerIsOpen}
  onCancel={() => {
    setPickerIsOpen(false);
  }}
  onSave={(_value: any) => {
    console.log(_value);
    let { Day, SessionTime } = _value;
    setSessionTime({ weekday: Day.value, period: SessionTime.value });
    setPickerIsOpen(false);
  }}
/>

Доступен полный исходный код:

aaronksaunders/ionic-react-pickerapp1
Это пример приложения Ionic ReactJS с использованием компонента IonPicker, полученного из предоставленного простого примера javascript…github.com

О явно инновационном

Clearly Innovative — миноритарный поставщик решений, разрабатывающий цифровые продукты. Мы превращаем идеи в жизнеспособные продукты и превращаем потребности клиентов в передовые технологические решения. Являясь лидером в области раннего внедрения и внедрения передовых технологий, Clearly Innovative предоставляет услуги, ориентированные на стратегию продукта, взаимодействие с пользователем, дизайн и разработку. По словам генерального директора Аарона Сондерса Мы не просто дизайнеры и разработчики, а поставщики комплексных цифровых решений. Clearly Innovative создала программу технического образования Clearly Innovative Education, миссия которой состоит в том, чтобы создать мир, в котором люди из недостаточно представленных слоев общества могут занять место за цифровым столом в качестве создателей, новаторов и предпринимателей.

#БудущееЗаписаноВ Коде

Серия Будущее написано в коде в рамках Инкубатора инклюзивных инноваций предлагает вводные и углубленные занятия по программированию, а также курсы кодирования с упором на бизнес и предпринимательство. Выбор предлагаемого программирования включает в себя кодирование, пользовательский интерфейс / UX, кодирование и бизнес, кодирование и предпринимательство, бизнес-агитацию, предпринимательство: превращение вашей идеи в приложение, и это лишь некоторые из них. Пожалуйста, свяжитесь с [email protected], чтобы узнать больше!