Как создать компонент ползунка диапазона в React с нуля, используя только и

1656602536 kak sozdat komponent polzunka diapazona v react s nulya ispolzuya

от Раджеша Пиллая

В этой статье мы шаг за шагом создадим компонент ползунка диапазона React, используя только

. Мы включим его посредством сенсорной поддержки.

Что вы можете сделать с куском примерно 50 ?

Создайте ползунок с нуля. Если это звучит интересно, соблюдайте.

QEwCv3lfVNUfQ1OBmNv06P0gCVvRiDwoyb2A

Окончательный результат будет выглядеть как анимация ниже.

3doGzBVGEKKvAJHv-dl3PXsZ62GZ-wg3hlx7

Обратите внимание, что я разработал этот компонент как учебное упражнение для моих студентов ReactJS – вне курса основ на Udemy, поэтому он может иметь некоторые крайние случаи (которые я буду исправлять, когда появятся).

Вы можете использовать элемент управления HTML5 и настроить его. Но я хотел применить другой подход и построить что-то с нуля. И результат есть то, что вы видите здесь.

Наш компонент ползунка будет состоять из следующих трех элементов:

  • Диапазон ползунка
  • Фактические элементы управления ползунком
  • Текущий диапазон выбора

Определение состояния для нашего компонента

Начнём с определения нашего государства. Я показываю вам только немаловажную часть кода. Полный исходный код можно найти по ссылке в конце статьи.

state = {      slots: 24,      start: 0,      end: 10,      labelMode: "mid",   // mid, long}

Состояние содержит следующие свойства.

  • слоты: общее количество слотов, которые нужно нарисовать (в этом случае я использую его в качестве селектора времени, поэтому он будет иметь 24-часовые интервалы)
  • start: начальное значение выбора
  • end: конечное значение выделения
  • labelMode: пока не используется. Но его можно использовать для настройки визуализации метки масштаба.

Часть возврата метода визуализации

Теперь давайте посмотрим часть возврата метода render. Метод render() будет медленно состоять из небольших частей функциональности.

return (        <div>          <h2>React Slider</h2>          <div className="example-1">            <div className="slider-container">             <div className="slider-scale">                 {scale}              </div>              <div className="slider">                  {slider}              </div>              <div className="slider-selected-scale">                  {currentScale}              </div>            </div>          </div>        </div>);

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

fmu5JvCqMDyJ8VDtwyeNScNlgydLc7MZdqWV

Если вы посмотрите на код, вы увидите только три важные части:

  • переменная масштаба
  • сменная ползунка
  • переменная currentScale

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

Вскрытие метода render().

Давайте инициализируем некоторые переменные. The scale, slider и currentScale JSX будет создан в цикле for, определенном ниже.

render () { let scale = []; let slider=[]; let currentScale = []; let minThumb = null; let maxThumb = null
..... // rest of the code }

Создайте JSX для переменной «scale».

Создать JSX для переменного масштаба достаточно просто. Мы просто перебираем значение слотов в состоянии и нажимаем

к массиву масштаба с требуемым классом CSS для стилизации.

Условие if гарантирует, что мы печатаем этикетку только для i=0, i=12 или i=24 (типа среднего диапазона). Пожалуйста, не стесняйтесь настроить это.

for (let i = 0; i <= this.state.slots;i++) {        let label = "";                if (i == 0 || i == 12 || i == 24) {          label = i;        }                scale.push(          <div             key={i}             className="slot-scale">            {label}          </div>        );

Вот код в формате изображения:

ya7pdynXtp7ethqBzlALLU8zx57PghfpjfG7

Создайте JSX для переменной ‘currentScale’

Давайте теперь продолжим цикл for и создадим JSX ‘currentScale’. Мы все еще находимся в том же цикле for, поэтому будет создано около 24 div в соответствии со значением в значении this.state.slots.

CurrentScale имеет класс ‘slot-scale-selected’.

let currentLabel = "";        if (i === this.state.start || i === this.state.end) {   currentLabel = i;}        currentScale.push(   <div       key={i}       className="slot-scale-selected">            {currentLabel}    </div> );
K8tMqK3APpa7vyi186bmW3Pze0ebX-9laxfv

Код очень похож на «масштабируемый» JSX, который мы создали.

Создайте JSX для переменной ‘slider’

Давайте напишем функцию для воспроизведения ползунка jsx. Ползунок требует двух больших пальцев, один для минимального и одного для максимального.

Давайте сначала инициализируем переменную thumb в зависимости от значения «i». Если ‘i’ совпадает с this.state.start, мы устанавливаем переменную minThumb. Иначе, если значение ‘i’ такое же, как this.state.end, мы инициализируем переменную maxThumb.

if (i === this.state.start) {   minThumb = <this.MinSlider />} else if (i === this.state.end) {   maxThumb = <this.MaxSlider />} else {   minThumb = null;   maxThumb = null;}
dvDNWJiBE0qleprPJYPC6yQBhedxr0KRq8TY

Создайте JSX для «ползунка»

Важным фрагментом кода здесь событие dragover. Это необходимо для корректной работы HTML.

let lineClass = "line";        if (i >= this.state.start && i < this.state.end) {   lineClass += " line-selected";}slider.push(   <div         data-slot={i}        onDragOver={this.onDragOver}         onTouchMove = {this.onDragOver}        onTouchEnd = {this.onDrop}        onDrop = {this.onDrop}        key={i}         className="slot">           <div  data-slot={i} className={lineClass}/>           <span className="scale-mark"></span>           {minThumb}           {maxThumb}    </div> );
xOUMWRHUNkJZLc1HVq7ihuhjI4O32BLCsyeA

Сменная ползунка требует двух дополнительных элементов для представления минимального и максимального большого пальца на ползунке.

Ползунок JSX имеет дополнительные обработчики событий для обработки события drop/touchend. В скором времени мы рассмотрим обработчики событий.

‘lineClass’ предоставляет стили/отображает линию на ползунке, а класс ‘line-selected’ создает стили для текущего выбранного диапазона.

Давайте теперь напишем функции MinSlider и MaxSlider вне метода render.

Функция MinSlider() для визуализации минимального большого пальца

Давайте посмотрим код. Важным реквизитом являются события, связанные с перетаскиванием и атрибутом перетаскивания. Атрибут draggable сделает этот элемент пригодным для перетаскивания.

Мы также добавляем обработчик событий touch. Перейдите по ссылке внизу статьи для добавления полизаполнения для сенсорной поддержки для API HTML5.

MinSlider=()=> {  return (     <div data-slider="min"            onDragStart={this.onDragStart}            onTouchStart={this.onDragStart}           draggable className="slider-thumb slider-thumb-min">     </div>  );}

Функция MaxSlider() для визуализации минимального большого пальца

MaxSlider почти такой же, как и MinSlider, за исключением данных и имени класса.

MaxSlider=()=> {  return (      <div data-slider="max"          onDragStart={this.onDragStart}           onTouchStart={this.onDragStart}        draggable className="slider-thumb slider-thumb-max">              </div>   );}

Изображение кода приведено ниже для справки.

4vI2mOLaFiwUgpnUVe3zXD0vx3w4jbeOJB0o

Обработка событий

Теперь рассмотрим обработчики событий перетаскивания/прикосновения, определенные в нашем

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

дроговер:

Событие dragover требуется для поддержки зоны сброса при использовании API перетаскивания HTML5. Единственное, что нам нужно сделать это вызвать preventDefault для объекта события.

onDragOver = (e) => {    e.preventDefault();}

перетащить:

Перетягивание позволяет нам сохранять перетягивающийся ползунок. Обратите внимание, что я не использую здесь объект dataTransfer, а просто использую переменную экземпляра для хранения этого.

onDragStart = (e) => {   let slider  = e.target.dataset.slider;   this.sliderType = slider;}

Значением e.target.dataset.slider является «min» или «max», указывающий, какой ползунок перетягивается.

ondrop:

Событие ondrop фиксирует, где опускается большой палец (на каком масштабе).

Это важный поток в событии ondrop:

  • Возьмите источник (или минимальный/максимальный большой палец)
  • Получите слот (там, где происходит падение)
  • Проверки
  • Обновить слот (в состоянии)
  • Сбросьте параметр sliderType.
onDrop = (e, target) => {      let source = this.sliderType;      let slot = Number(e.target.dataset.slot);           if (isNaN(slot)) return;            if (source === "min") {        if (slot >= this.state.end) return;        this.setState({          start: slot        },()=>{          console.log(this.state);        })      } else if (source === "max") {        if (slot <= this.state.start) return;        this.setState({          end: slot        },()=>{          console.log(this.state);        })      }     this.sliderType = null;}
13wMILHS9heXZUOf5pegbiq34G2o6Gom1onc

Полный исходный код/и демонстрацию можно увидеть здесь http://jsbin.com/remodat/edit?output

Поскольку я использую функции перетаскивания HTML5, чтобы добавить прикосновение, поддержка, пожалуйста, добавьте эту ссылку на полизаполнение к своему html-файлу.

Бернардо-Кастильо/драпточ
dragdroptouch – Polyfill, который позволяет поддерживать HTML5 dragdrop на мобильных (сенсорных) устройствах.github.com

Todos

  • Выньте логику в отдельный класс Component
  • Проверьте это и добавьте настройки.

История

  • 21 мая 2018 г. — Первый выпуск

PS: Этот компонент является результатом быстрой попытки кодирования. Это будет переработано.

продвижение по службе: Если вы хотите поддержать нашу обучающую программу с открытым кодом Mastering Full Stack Engineering за 12-20 недель, вот специальный купон на 10 долларов для средних читателей для моего будущего живого курса ReactJS-Beyond основ по udemy (MEDIUM_500 – это код купона, уже помечена тегом в вышеприведенном URL-адресе)

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *