react实现步进器

 

创建一个步进器组件，包含当前步骤（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;