Автор оригинала: FreeCodeCamp Community Member.
Rajesh Pillai
В этой статье мы создадим компонент ползунка диапазона реагирования на шаг за шагом, используя только
Что вы можете сделать с кусочком около 50
Постройте контроль ползунка с нуля. Если это звучит интересно, то следите.
Окончательный вывод будет выглядеть как анимация ниже.
Обратите внимание, что я разработал этот компонент в качестве учебных упражнений для моих учеников Reactjs – за пределами основы курса по UDEMY Так что у него могут быть несколько краевых случаев (которые я исправлю как и когда встречаются).
Вы можете использовать контроль диапазона HTML5 и настроить его. Но я хотел сделать другой подход и построить что-то с нуля. И результат – то, что вы видите здесь.
Наш слайдер будет состоит из трех элементов:
- Ассортимент слайдера
- Фактический ползунок управления
- Текущий диапазон выбора
Определение состояния для нашего компонента
Давайте начнем с определения нашего государства. Я показываю только вам важной частью кода. Для полного исходного кода, пожалуйста, обратитесь к ссылке в конце статьи.
state = { slots: 24, start: 0, end: 10, labelMode: "mid", // mid, long}Состояние содержит следующие свойства.
- Слоты: общие слоты, которые будут нарисованы (в этом случае я использую его как селектор времени, поэтому у него будет 24-часовые слоты)
- Начало: Начальное значение выбора
- конец: Конечное значение выбора
- LabelMode: в настоящее время не используется. Но можно использовать для настраивания рендеринга метки масштаба.
Возвратная часть метода рендера
Давайте теперь посмотрим на возвращенную часть метода рендера. Метод Render () будет медленно состоит из небольших кусочков функциональности.
return ();React Slider
{scale}{slider}{currentScale}
Для тех, кто читает на мобильном, появление ниже может быть полезно, так как иногда среда нарушает форматирование кода.
Если вы взгляните на код, есть только три важных предмета:
- весывальная переменная
- Переменная ползунка
- Переменный вариант
Три переменных выше будут нести ответственность за рендуринг правильных частей общего ползунка.
Рассекать визуализацию () метод
Давайте инициализируем некоторые переменные. масштаб , слайдер и Currentscale. JSX будет создан в рамках цикла, определенного ниже.
render () { let scale = []; let slider=[]; let currentScale = []; let minThumb = null; let maxThumb = null..... // rest of the code }
Создайте JSX для переменной «Scale»
Создание JSX для переменной масштаба довольно проста. Мы просто петлю через значение слотов в состоянии и нажимайте
Если условие, которое гарантирует, что мы печатаем только этикетку, или (вроде среднего диапазона). Пожалуйста, не стесняйтесь настроить это.
for (let i = 0; i <= this.state.slots;i++) { let label = ""; if (i == 0 || i == 12 || i == 24) { label = i; } scale.push( {label} );Вот код в формате изображения:
Создайте JSX для переменной «Creexcale»
Давайте теперь будем продолжаться с той же для цикла и создать JSX «CurrentScale». Мы все еще находимся в том же петле, поэтому около 24 DIV будут созданы согласно значению в этом. Значение.
У Creextcale есть класс «Scale-Scale».
let currentLabel = ""; if (i === this.state.start || i === this.state.end) { currentLabel = i;} currentScale.push( {currentLabel} );Код довольно похож на «масштаб», который мы создали.
Создайте JSX для переменной «слайдер»
Давайте напишем функцию, чтобы сделать JSX «слайдер». Слайдер нуждается в двух больших пальцев, один для минуты, а один для макс.
Давайте сначала инициализируем вариабельность большого пальца в зависимости от значения «I». Если «I» такой же, как этот .state.Start, то мы устанавливаем переменную Minthumb. Иначе, если значение «i» такое же, как и stave.end, то мы инициализируем переменную Maxthumb.
if (i === this.state.start) { minThumb = Создайте JSX для «слайдера»
Важный кусок кода здесь – это мероприятие Drewover. Это требуется для падения HTML для правильной работы.
let lineClass = "line"; if (i >= this.state.start && i < this.state.end) { lineClass += " line-selected";}slider.push( {minThumb} {maxThumb} );Переменная ползунка нуждается в двух дополнительных элементах функций для представления мин и максимальный большой палец на ползунке.
Слайдер JSX имеет дополнительные обработчики событий для обработки события Drop Event/Takeend. Мы посмотрим на обработчики событий в ближайшее время.
Стили/стили LineClass’s в строке на слайдере и стили класса «Выбранные линии» Выбранный в настоящее время выбранный диапазон.
Давайте теперь напишем Minslider и Maxslider функцию вне метода рендера.
Функция minslider () для рендеринга минимального большого пальца
Давайте посмотрим на код. Важные реквизиты – это события, связанные с перетаскиванием и атрибутом Draggable. Атрибут Draggetable сделает этот элемент Draggable.
Мы также добавляем обработчик сенсорного события. Обратитесь к ссылке в нижней части статьи, чтобы добавить сенсорную поддержку Polyfill для API HTML5.
MinSlider=()=> { return ( );}Функция MaxSlider () для рендеринга минимального большого пальца
MaxSlider почти такой же, как Minslider, за исключением данных и класса.
MaxSlider=()=> { return ( );}Изображение кода приведено ниже для справки.
Обработка событий
Давайте теперь посмотрим обработчики событий Drag/Touch, определенные в нашем
Перетащите над:
Мероприятие DRAWOVER необходимо для поддержки зоны падения при использовании API HTML5 Drag/Drop. Единственное, что нам нужно сделать, состоит в том, чтобы вызвать предотвращение объекта события.
onDragOver = (e) => { e.preventDefault();}DragStart:
DragStart позволяет нам хранить, какой ползунок перетаскивается. Обратите внимание, что я не использую объект dataTaTransfer здесь, но просто используя переменную экземпляра для хранения этого.
onDragStart = (e) => { let slider = e.target.dataset.slider; this.sliderType = slider;}Значение e.ctarget.dataset.slider – это либо «мин», либо «максимальный», указывающий, какой ползунок перетаскивается.
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;}Полный исходный код/и демонстрация можно увидеть здесь http://jsbin.com/remodat/edit?output
Поскольку я использую HTML5 Drag и Drop-функции, чтобы добавить прикосновение, поддержку, пожалуйста, добавьте эту ссылку на полифилл на ваш HTML-файл.
Бернардо-Кастильо/Dragdroptouch DRAGDROPTOUCH – Polyfill, который обеспечивает поддержку HTML5 Drag Drop на мобильных (сенсорных) устройствах. github.com
Тодос
- Извлечь логику в отдельный класс компонентов
- Проверьте его и и добавьте настройку.
История
- 21-май-2018 – первый выпуск
P.S: Этот компонент является результатом очень быстрой попытки кодирования. Это будет повторно.
Продвижение : Если вы хотите поддержать нашу учебную программу с открытым исходным кодом Овладение полной инженером стека в 12-20 недель Тогда вот особый 10 $ купон для средних читателей для моего предстоящего живого Reactjs – за пределы основы Курс на UDEMY (Medile_500 – код купона, который уже помечен в вышеупомянутом URL)