[ReactJS ]How to add multiple events in one tag?-CodePudding

would really be thankful if someone who can teach me to solve this problem. I'm making a counting timer which is describled below:

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;

My question is, how to hide these two button after clicking one of these two. Please help me! Thank you all!!

CodePudding user response：

Assuming show is the variable to control whether the buttons are visible or not.

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

React children need to return one element, so you can either wrap it in a div, or an empty element, <> </>, so you can return multiple nodes without adding a div, span, etc.

show && <></> means if show is true, the right-hand side will render, otherwise, it won't be rendered.

CodePudding user response：

First, you have to introduce new state variable, you need one ror the start btn and another for the stop btn.

You have to setShow to false on either click and render the buttons conditionally depending on show variable:

const [countdown, setCountdown] = useState(10)
const [showStart, setShowStart] = useState(true)
const [showStop, setShowStop] = useState(true);

const ref = useRef()

function handleStart() {
    setShowStart(false);

    ref.current = setInterval(() => {
        setCountdown(prev => prev - 1)
    }, 1000)
}
function handleStop() {
    setShowStop(false);

    clearInterval(ref.current)
}


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

CodePudding user response：

Hope the Below Code Solver Your Problem

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;