Tạo một component MultiStepForm trong ReactJS

npx create-react-app react-multi-step-form
cd react-multi-step-form

import React, { useState } from 'react';
import './MultiStepForm.css';

const MultiStepForm = () => {
  const [step, setStep] = useState(1);
  const [formData, setFormData] = useState({
    firstName: '',
    lastName: '',
    email: '',
    password: '',
    address: '',
    city: '',
    state: '',
    zip: '',
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value,
    });
  };

  const nextStep = () => {
    setStep(step + 1);
  };

  const prevStep = () => {
    setStep(step - 1);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Thông tin đã nhập:', formData);
    // Thêm logic xử lý thông tin đã nhập ở đây (ví dụ: gửi đến API, lưu vào state, ...)
  };

  const renderForm = () => {
    switch (step) {
      case 1:
        return (
          <div className="step-form">
            <h2>Bước 1: Thông Tin Cá Nhân</h2>
            <label>
              Họ:
              <input
                type="text"
                name="firstName"
                value={formData.firstName}
                onChange={handleChange}
                required
              />
            </label>
            <br />
            <label>
              Tên:
              <input
                type="text"
                name="lastName"
                value={formData.lastName}
                onChange={handleChange}
                required
              />
            </label>
            <br />
            <label>
              Email:
              <input
                type="email"
                name="email"
                value={formData.email}
                onChange={handleChange}
                required
              />
            </label>
            <br />
            <button onClick={nextStep}>Tiếp Theo</button>
          </div>
        );
      case 2:
        return (
          <div className="step-form">
            <h2>Bước 2: Địa Chỉ</h2>
            <label>
              Địa Chỉ:
              <input
                type="text"
                name="address"
                value={formData.address}
                onChange={handleChange}
                required
              />
            </label>
            <br />
            <label>
              Thành Phố:
              <input
                type="text"
                name="city"
                value={formData.city}
                onChange={handleChange}
                required
              />
            </label>
            <br />
            <label>
              Tỉnh/Thành Phố:
              <input
                type="text"
                name="state"
                value={formData.state}
                onChange={handleChange}
                required
              />
            </label>
            <br />
            <label>
              Mã Zip:
              <input
                type="text"
                name="zip"
                value={formData.zip}
                onChange={handleChange}
                required
              />
            </label>
            <br />
            <button onClick={prevStep}>Quay Lại</button>
            <button onClick={nextStep}>Tiếp Theo</button>
          </div>
        );
      case 3:
        return (
          <div className="step-form">
            <h2>Bước 3: Mật Khẩu</h2>
            <label>
              Mật Khẩu:
              <input
                type="password"
                name="password"
                value={formData.password}
                onChange={handleChange}
                required
              />
            </label>
            <br />
            <button onClick={prevStep}>Quay Lại</button>
            <button onClick={handleSubmit}>Hoàn Thành</button>
          </div>
        );
      default:
        return null;
    }
  };

  return (
    <div className="multi-step-form-container">
      <form onSubmit={handleSubmit}>
        {renderForm()}
      </form>
    </div>
  );
};

export default MultiStepForm;

.multi-step-form-container {
  max-width: 400px;
  margin: auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.step-form {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 8px;
}

input,
textarea {
  width: 100%;
  padding: 8px;
  margin-bottom: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  background-color: #3498db;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 10px;
}

button:hover {
  background-color: #2980b9;
}

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

function App() {
  return (
    <div className="App">
      <h1>React Multi-Step Form Exercise</h1>
      <MultiStepForm />
    </div>
  );
}

export default App;

npm start