使用按鈕反應條件渲染

Question

我需要創建將在每個組件之間更改的按鈕，當一個顯示時，其余的必須隱藏，我如何通過單擊按鈕來做到這一點？

import Step1 from './steps/Step1'
import Step2 from './steps/Step2'
import Step3 from './steps/Step3'
import Step4 from './steps/Step4'

const Activation = () => {
 return (
  <div className='modal-steps'>
     <Step1 />
     <Step2 />
     <Step3 />
     <Step4 />
  </div>

  <div className='modal-activation'>
     <button className='next-step'> Next </button>
     <button className='return'> Return </button>
  </div>
 )
}

例如，第 1 步將是默認顯示的值，我將單擊下一步按鈕，第 1 步將被禁用，第 2 步將顯示它等等。 如果單擊后退按鈕，當前步驟將變為隱藏並顯示上一步。

我一直在嘗試這樣做幾天，但我還沒有真正得到任何地方..

Answer 1

在下面嘗試我的代碼，請回復我的代碼是否有效。 謝謝

import {useState} from "react"

const Activation = () => {
  const [num, setNum] = useState(1)

  const handleCountUp = () => {
    if (num < 4) setNum++
  }

  const handleCountDown = () => {
    if (num > 1) setNum--
  }

  return (
    <div className='modal-steps'>
      {num === 1 && <Step1 />}
      {num === 2 && <Step2 />}
      {num === 3 && <Step3 />}
      {num === 4 && <Step4 />}
    </div>

    <div className='modal-activation'>
      <button className='next-step' onClick={handleCountUp}> Next </button>
      <button className='return' onClick={handleCountDown}> Return </button>
    </div
  )
}

Answer 2

干得好

import React, { useState } from "react";
export default function App() {
  const [currentState, setCurrentState] = useState(1);
  return (
    <>
      {currentState === 1 && <StepOne />}
      {currentState === 2 && <StepTwo />}
      {currentState === 3 && <StepThree />}

      <button onClick={() => setCurrentState(currentState + 1)}>Next </button>
      <button onClick={() => setCurrentState(currentState - 1)}>
        Previous{" "}
      </button>
    </>
  );
}

function StepOne() {
  return <h1>Step 1 </h1>;
}

function StepTwo() {
  return <h1>Step 2 </h1>;
}
function StepThree() {
  return <h1>Step 3 </h1>;
}

Answer 3

有條件地顯示這些步驟

  import {useState} from "react";

 const Activation = () => {
  const [activation,setActivation]=useState(1);

  const increment = () => {
     if(activation === 3){
     setActivation((activation)=>activation=3)
     }
     else setActivation((activation)=>activation+1)
  }
  const decrement = () =>{
  if(activation === 1){
     setActivation((activation)=>activation=1)
  }
  else setActivation((activation)=>activation-1); 
 }
  return ( 
  <div className='modal-steps'>
  {activation ===1 && <Step1 />}
   {activation ===2 && <Step2 />}
  {activation===3 && <Step3 />}
  
  </div>

  <div className='modal-activation'>
    <button className='next-step' onClick={increment}> Next </button>
    <button className='return' onClick={decrement}> Return </button>
   </div>
 )
}