Создайте простой счетчик с помощью React

Очень простой пример создания счетчика в React

В этом коротком руководстве мы создадим очень простой пример счетчика в React, применив многие концепции и теории, изложенные ранее.

Воспользуемся для этого Codepen. Начнем с разветвленияРучка-шаблон React.

В Codepen нам не нужно импортировать React и ReactDOM, поскольку они уже добавлены в область видимости.

Мы показываем счетчик в div и добавляем несколько кнопок для увеличения этого счетчика:

const Button = ({ increment }) => {
  return <button>+{increment}</button>
}

const App = () => { let count = 0

return ( <div> <Button increment={1} /> <Button increment={10} /> <Button increment={100} /> <Button increment={1000} /> <span>{count}</span> </div> ) }

ReactDOM.render(<App />, document.getElementById(‘app’))

Давайте добавим функциональность, которая позволяет нам изменять счетчик, нажимая кнопки, добавляяonClickFunctionопора:

const Button = ({ increment, onClickFunction }) => {
  const handleClick = () => {
    onClickFunction(increment)
  }
  return <button onClick={handleClick}>+{increment}</button>
}

const App = () => { let count = 0

const incrementCount = increment => { //TODO }

return ( <div> <Button increment={1} onClickFunction={incrementCount} /> <Button increment={10} onClickFunction={incrementCount} /> <Button increment={100} onClickFunction={incrementCount} /> <Button increment={1000} onClickFunction={incrementCount} /> <span>{count}</span> </div> ) }

ReactDOM.render(<App />, document.getElementById(‘app’))

Здесь каждый элемент Button имеет 2 свойства:incrementиonClickFunction. Мы создаем 4 разные кнопки с 4 значениями приращения: 1, 10 100, 1000.

Когда нажимается кнопка в компоненте "Кнопка",incrementCountфункция вызывается.

Эта функция должна увеличивать локальный счетчик. Как мы можем это сделать? Мы можем использовать крючки:

const { useState } = React

const Button = ({ increment, onClickFunction }) => { const handleClick = () => { onClickFunction(increment) } return <button onClick={handleClick}>+{increment}</button> }

const App = () => { const [count, setCount] = useState(0)

const incrementCount = increment => { setCount(count + increment) }

return ( <div> <Button increment={1} onClickFunction={incrementCount} /> <Button increment={10} onClickFunction={incrementCount} /> <Button increment={100} onClickFunction={incrementCount} /> <Button increment={1000} onClickFunction={incrementCount} /> <span>{count}</span> </div> ) }

ReactDOM.render(<App />, document.getElementById(‘app’))

useState()инициализирует переменную count на 0 и предоставляет намsetCount()метод обновления его значения.

Мы используем оба вincrementCount()реализация метода, который вызываетsetCount()обновление значения до существующего значенияcount, плюс приращение, передаваемое каждым компонентом Button.

The react counter

Полный пример кода можно увидеть наhttps://codepen.io/flaviocopes/pen/QzEQPR

Скачать мою бесплатнуюСправочник по React


Больше руководств по реакции: