Рубрики
Без рубрики

Как: Старт-и стоп счетчик в реакции

Сегодня мы будем реализовывать счетчик в реакции с функциональностью «Пуск» и «Стоп» …. Помечено в React, JavaScript, HTML, Redux.

Сегодня мы будем реализовывать счетчик в реакции с функциональностью «Пуск» и «Стоп».

Давайте посмотрим на наши цели …

Цели

  1. Создайте кнопку с внутренним текстом «Пуск».
  2. Создайте кнопку с внутренним текстом «Стоп».
  3. Создание функциональности щелчков на обоих кнопках с использованием слушателей ACT Presivers и обработчиков событий.
  4. Как только кнопка «Пуск» нажата, счетчик отображается на странице и начнет увеличение с шагом в 1 секунду.
  5. Как только нажмите кнопку «Пуск», на браузере отображается новая кнопка «Pause».
  6. Создание функциональности щелчков на кнопке паузы, используя слушателей событий, чтобы приостановить счетчик и изменить внутренний текст кнопки, чтобы «возобновить».
  7. После нажатия кнопки «Резюма» счетчик будет опровергнуть, а внутренний текст перейдет на «Пауза».
  8. Как только кнопка «Стоп» нажат, счетчик остановится и будет удален со страницы.
  9. Как только нажмите кнопку «Стоп», кнопка «Пауза» или «резюме» будет удалена со страницы.
  10. Кнопка «Пуск» должна быть отключена, если она была нажата.
  11. Кнопка «Стоп» должна быть отключена, если она была нажата.

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

Ключевые концепции + вопросы

  • Как события React обрабатывают события?
  • Как JS обрабатывает события?
  • Что такое пользовательское событие?
  • Как мы гарантируем, что HTML будет отображаться на странице?
  • Как мы увеличиваем время на секунды?
  • Как мы устанавливаем или размонтируйте элементы HTML со страницы?
  • Какие атрибуты нужны элементы кнопки?
  • Как появляется браузер, когда происходит событие пользователя?

С этими понятиями в виду, давайте начнем!

Начать + кнопку остановки

Для этого я создаю реакцию Функциональный Компонент с именем «счетчик».

import React from 'react'

export default function Timer() {
    return (
        


        

    )
}

В любом случае, который вы хотите иметь функциональность противодействия, вы можете построить два (2) элемента кнопки в операторе возврата внутри DIV. Вы можете классифицировать элемент div с именем класса как такой «контр-контейнер» или «Counter-кнопки». ** Помните: возвратные операторы могут вернуть только один родительский элемент, поэтому лучше всего устанавливать элементы детей в Div или фрагмент. * *

import React from 'react'

export default function Timer() {
    return (
        

            
            
        

    )
}

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

Создание слушателей событий OnClick и обработчика для Start + Stop

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

import React from 'react'

export default function Timer() {
    const startTimer = () => {

    }

    const stopTimer = () => {

    }

    return (
        

            
            
        

    )
}

Выше мы устанавливаем атрибуты прослушивателя событий «OnClick» и пропустить функции. Затем мы объявляем функции arrow с именем функции, который мы передали на наше слушатели событий как для кнопок «Пуск», так и «Стоп».

Наш браузер должен выглядеть что-то подобное сейчас:

Но если вы нажмете одну кнопку, вы заметите, что ничего не произойдет, потому что мы не определили наши обработчики событий (StartTimer + Stoptimer)!

Использование состояния RECT + крюк для установки интервала

Далее, поскольку мы используем React и JavaScript, и мы находимся в функциональном компонентах RACT, мы должны использовать жизненные циклы для установки и манипулирования состоянием!

import React from 'react'
import { useState } from 'react'

export default function Timer() {
    const [seconds, setSeconds] = useState(0)


    const startTimer = () => {

    }

    const stopTimer = () => {

    }

    const currentCount = seconds

    return (

        

            
            
            
{currentCount}

        

    )
}

Во-первых, я импортирую крючок жизненного цикла «Usestate» из реагирования на верхней части нашего компонента. Затем я использую разрушимость для создания как переменной «секунды», так и функции «SateConds». Помните, что мы хотим, чтобы наш счетчик увеличился на 1 в считанные секунды! Я устанавливаю оба переменных к крючке жизненного цикла USESTATE, который является функцией, и я пропускаю в «0» (который представляет то, что наш номер наш счетчик начнется!)

Прямо выше оператора возврата, я заявляю и определил постоянную «CurrentCount» на наши постоянные секунды, которые мы определили с помощью крюка жизненного цикла (это необязательно – я люблю назвать его, чтобы отразить то, что он будет представлять на странице – отсюда Отказ В операторе возврата я создал еще один HTML-элемент, метка P с идентификатором «счетчика». Затем я пропускаю в постоянном iconcount. Это гарантирует, что наш счетчик покажет на странице!

Наш браузер должен выглядеть так:

Используя setinterval (), чтобы начать счетчик

    const [seconds, setSeconds] = useState(0)

    const startTimer = () => {
            setInterval(() => {
                setSeconds(seconds => seconds + 1)
            }, 1000)
    }

    const stopTimer = () => {
        clearInterval(setSeconds(0))
        document.querySelector('#counter').remove()
    }

В нашем обработке событий/функция стрелки «StartTimer ()», я звоню на SetInterval (); Способ, который вызывает другую функцию по указанным интервалам (в миллисекундах). setinterval (), в нашем случае принимает анонимную функцию и проходит в нашей функции «SateConds ()», которые мы объявили с использованием разрушения. Затем мы пройдем наши «секунды» переменную, чтобы вернуть значение «секунды», увеличиваемых на 1. Наконец, поскольку setinterval () использует миллисекунды, мы проходим в конечном аргументе millisecond “1000”, которые приравнивают к 1 секунду.

В нашем другом обработке событий «Stoptimer ()», я призываю функцию под названием «Clearinterval ()». Вы можете подумать об этой функции в качестве противоположного двоюродного брата «Setinterval ()», тогда как Setinterval () запускает таймер, ClearInterval () очищает его. Затем я передаю нашу функцию «SateConds ()», чтобы очистить, и пройти в ноль. Это сделает ноль на наш счетчик, когда нажата кнопка Стоп – начиная с счетчика. Затем мы используем селектор запросов для поиска нашего целого документа для элемента с идентификатором «счетчика» и удалить его после. Вместе это в конечном итоге сбросит таймер и удалит счетчик из браузера.

Пауза + кнопка резюме, отключение кнопок после нажатия

const startTimer = () => {

            setInterval(() => {
                setSeconds(seconds => seconds + 1)
            }, 1000)

            document.querySelector('.start-button').setAttribute("disabled", "true")
            document.querySelector('.stop-button').removeAttribute("disabled")


                const pauseButton = document.createElement("button")
                pauseButton.innerText = 'pause'
                pauseButton.className="pause-button"
                document.querySelector('.counter-container').appendChild(pauseButton)
                pauseButton.addEventListener("click", () => {
                    if (pauseButton.innerText === "pause"){
                        pauseButton.innerText = "resume"
                    } else {
                        pauseButton.innerText = 'pause'
                    }
                })


    }

Поскольку мы хотим, чтобы кнопка «Пауза» появилась только после нажатия кнопки «Пуск», я создаю и добавляю кнопку Паузы на страницу в нашем обработке событий StartTimer (). Я использую методы Manipulation JavaScript DOM для создания, установите внутренний текст, установите имя пользователя и добавить его на наш «контр-контейнер».

Только что выше, я использую селектор запросов, чтобы найти кнопку по классу и использовать метод SetAttribute () для отключения кнопки «Пуск». С другой стороны, если кнопка «Пуск» нажат, я обязательно удалите атрибут «Отключено» из кнопки «Стоп». Мы хотим, чтобы начать отключить, когда остановка – не инвалид!

Я могу изменить внутренний текст кнопки «Пауза», чтобы «возобновить», добавив слушатель JS-события, который требуется в типе событий «Нажмите» и анонимную функцию. Используя оператор if-else, я задаю, если внутренний текст кнопки равен «Pause» при нажатии? Если это так, измените внутренний текст на «резюме»!

    const stopTimer = () => {
        clearInterval(setSeconds(0))

        if (!!document.querySelector('#counter')){
            document.querySelector('#counter').remove()
        }
        document.querySelector('.stop-button').setAttribute("disabled", "true")
        document.querySelector('.start-button').removeAttribute("disabled")
        document.querySelector('.pause-button').remove()
    }

Теперь в нашем STOPTIMER () я также использую селектор JavaScript Query Selector для установки атрибута «отключен» на кнопку STOP, и я удаляю атрибут отключенного отключения из кнопки «Пуск». Я также удаляю HTML-элемент с идентификатором «счетчика» с страницы, если она уже существует, и я удаляю кнопку Паузы после нажатия кнопки Стоп.

Оглядываясь назад на наши цели

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

  1. Создайте функциональность щелчков на кнопке паузы с помощью слушателей событий, чтобы приостановить счетчик.
  2. После нажатия кнопки «Резюме» счетчик будет опровергнуть.

Pausing + Usausing наш счетчик

const [seconds, setSeconds] = useState(0)
    const [paused, setPaused] = useState(false)



    const startTimer = () => {

            const current = setInterval(() => {
                setSeconds(seconds => seconds + 1)
            }, 1000)

            document.querySelector('.start-button').setAttribute("disabled", "true")
            document.querySelector('.stop-button').removeAttribute("disabled")


                const pauseButton = document.createElement("button")
                pauseButton.innerText = 'pause'
                pauseButton.className="pause-button"
                document.querySelector('.counter-container').appendChild(pauseButton)
                pauseButton.addEventListener("click", () => {
                    if (pauseButton.innerText === "pause"){
                        pauseButton.innerText = "resume"
                        clearInterval(current)
                        setPaused(true)
                    } else {
                        pauseButton.innerText = 'pause'
                        setInterval(() => {
                            setSeconds(seconds => seconds + 1)
                        }, 1000)
                        setPaused(false)
                    }
                })


    }

Внутри нашего обработчика событий «StartTimer ()» я добавил в нашу паузу JS-прослушивателя. Если кнопка Паузы нажата, внутренний текст изменится на «резюме», и интервал очищен на наше текущее количество. Я использую функцию ClearInterval () и пропустите в нашем постоянном «текущем», который я устанавливаю равно нашу оригинальную функцию Setinterval (). Перейдя в «текущий» таймер, останется приостановленным при его текущем номере. Теперь вы можете увидеть новую функцию под названием «SetPaused ()». Я использовал аналогичную деструктурию с USESTATE () для создания констант «Пауза» и «Установленные». Начальное состояние «приостановленного» является ложным, когда документ загружен. Таким образом, когда мы щелкнули кнопку паузы, мы теперь устанавливаем равную верную.

Затем, если кнопка Innerntext равна «возобновить» внутренний текст, конечно, меняется обратно в «Паузу», и возобновим счетчик, используя Setinterval (), идентичный нашему постоянному «текущему». Я наконец-то разобрался обратно в исходное состояние «ложь».

Наш браузер должен выглядеть так …

Сначала загружено в браузере:

Начальная кнопка нажала + счетчик увеличивается:

Кнопка паузы нажала + счетчик паузы:

Нажмите кнопку STOP + наш счетчик удален со страницы:

Резюме

Это простое приложение в концепции, но, как мы видим, это может быть сложным. Несмотря на присутствие на присутствии в браузере, он касается многих JS + React Condentals и глубоко изображает необходимость хорошего понимания этих оснований. Это может быть не идеально, но это работает! Такое отношение может доставить вас далеко в кодировке, так как он помог мне. Начните с основ + основы, и они будут расширяться, когда вы учитесь и код каждый день. Я надеюсь, что это помогло вам так, как это помогло мне.

🌵Comment ниже для любых вопросов, предложения + что-либо еще

Продолжайте учиться + кодировать вместе! ☁️

Оригинал: “https://dev.to/am20dipi/how-to-start-stop-counter-in-react-3hf1”

Читайте ещё по теме: