时间戳

首页 > 解决方案 > 如何在一个标签中添加多个事件？

reactjs - 如何在一个标签中添加多个事件？

问题描述

我正在使用这个反应功能组件制作一个计数计时器，如下所述

import {useEffect, useState, useRef} from 'react'

function Content() {
   
    const [countdown, setCountdown] = useState(10)
    const [show, setShow] = useState(true)

    const ref = useRef()

    function handleStart() {
        ref.current = setInterval(() => {
            setCountdown(prev => prev - 1)
        }, 1000)
    }
    function handleStop() {
        clearInterval(ref.current)
    }
 

    return (
        <div>
            <h2 style={{padding: 20}}>Time remaining: {countdown}</h2>
            <button onClick={handleStart}>Start</button>
            <button onClick={handleStop}>Stop</button>
        </div>
    )

}

export default Content;

单击两个按钮之一后如何隐藏这两个按钮。

标签： reactjs

解决方案

希望下面的代码解决您的问题

import React, { useEffect, useState, useRef } from 'react';

function Example() {
  const [countdown, setCountdown] = useState(10);
  const [show, setShow] = useState(true);

  const ref = useRef();

  function handleStart() {
    setShow(!show);
    ref.current = setInterval(() => {
      setCountdown((prev) => prev - 1);
    }, 1000);
  }
  function handleStop() {
    setShow(!show);
    clearInterval(ref.current);
  }

  return (
    <div>
      <h2 style={{ padding: 20 }}>Time remaining: {countdown}</h2>
      {show && (
        <div>
          <button onClick={handleStart}>Start</button>
          <button onClick={handleStop}>Stop</button>
        </div>
      )}
    </div>
  );
}

export default Example;

推荐阅读