如何在reactjs中使用react-form-stepper

Question

我使用的是https://github.com/M0kY/react-form-stepper npm包。我想创建一个step表单。

import { Stepper, Step } from 'react-form-stepper';

<Stepper activeStep={1}>
  <Step label="Children Step 1" />
  <Step label="Children Step 2" />
  <Step label="Children Step 3" />
</Stepper>

Answer 1

尝尝这个

import { Stepper, Step } from 'react-form-stepper';

function PlaceOrder() {
    const [goSteps, setGoSteps] = useState(0);

    return (
        <div>
            <Stepper activeStep={goSteps}>
                <Step onClick={() => setGoSteps(0)} label="step 1" />
                <Step onClick={() => setGoSteps(1)} label="step 2" />
                <Step onClick={() => setGoSteps(2)} label="step 3" />
            </Stepper>
            {goSteps === 0 && (
                <div>
                    Cart
                    <button onClick={() => setGoSteps(1)}>Next</button>
                </div>
            )}
            {goSteps === 1 && (
                <div>
                    Addreess
                    <button onClick={() => setGoSteps(2)}>Next</button>
                </div>
            )}
            {goSteps === 2 && (
                <div>
                    Payment
                    <button onClick={() => setGoSteps(3)}>Submit</button>
                </div>
            )}
        </div>
        
export default PlaceOrder;