Создание интерактивного счётчика в React‑приложении

Условие

Требуется доработать представленный React‑компонент так, чтобы он удовлетворял следующим условиям:

1. На экране должно отображаться текущее значение счётчика.
2. При нажатии на кнопку с надписью «Увеличить» счётчик должен расти на единицу.
3. При двойном клике по той же кнопке счётчик сбрасывается до нуля.
4. Решение должно быть реализовано с помощью функционального компонента и хуков useState (для хранения значения) и, при необходимости, useEffect.

Подсказки:

• Завести состояние счётчика через useState.
• Добавить обработчик onDoubleClick к кнопке, который будет выполнять сброс.

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="app">
      <div className="header">
        <div>
          <img src="https://storage.googleapis.com/coderpad_project_template_assets/coderpad_logo.svg" />
        </div>
        <div>
          <img src="https://storage.googleapis.com/coderpad_project_template_assets/react.svg" />
          <span>React App</span>
        </div>
      </div>
      <div className="content">
        <img src="https://storage.googleapis.com/coderpad_project_template_assets/react.svg" />
        <p>Hello React!</p>
      </div>
      <div className="footer">
        Use the Shell to install new packages.
      </div>
    </div>
  );
}

export default App;

Ответ

Добавьте state счётчика, onClick для увеличения и onDoubleClick для сброса. Двойной клик сначала порождает обычные click-события, поэтому перед сбросом возможны краткие увеличения.

function Counter() {
  const [count, setCount] = React.useState(0);
  return <>
    <output>{count}</output>
    <button onClick={() => setCount(value => value + 1)} onDoubleClick={() => setCount(0)}>
      Увеличить
    </button>
  </>;
}

Этот компонент можно вставить в content исходного шаблона. Итог после распознанного двойного клика — ноль. Если одиночное действие не должно происходить вообще при двойном клике, потребуется отложенное распознавание, что добавляет задержку обычному клику. Для клавиатуры и touch-интерфейса полезна отдельная доступная кнопка сброса.