当前位置：首页 > article >正文

react实现步进器

article 2024/11/15 13:53:44

创建一个步进器组件，包含当前步骤（currentStep）的状态以及前进和后退的操作：

import React, { useState } from 'react';

function Stepper() {
  const [currentStep, setCurrentStep] = useState(1);

  const handleNext = () => {
    setCurrentStep(currentStep + 1);
  };

  const handlePrevious = () => {
    setCurrentStep(currentStep - 1);
  };

  return (
    <div>
      <h2>Current Step: {currentStep}</h2>
      <button onClick={handlePrevious} disabled={currentStep === 1}>
        Previous
      </button>
      <button onClick={handleNext} disabled={currentStep === 3}>
        Next
      </button>
    </div>
  );
}

export default Stepper;

在应用中使用该步进器组件：

import React from 'react';
import Stepper from './Stepper';

function App() {
  return (
    <div>
      <Stepper />
      {/* 其他组件 */}
      {/* ... */}
    </div>
  );
}

export default App;

以下是一个完整步进器的例子：

import React, { useState } from "react";

function Stepper() {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount(count + 1);
  };

  const handleDecrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={handleIncrement}>+</button>
      <button onClick={handleDecrement}>-</button>
    </div>
  );
}

export default Stepper;