下一个JS |多步形式-DEV365 开发者社区

大家好，今天我将向您展示如何使用简单的方法在下一个JS中创建多步单。

使用的技术 - 接下来的JS带有parwindcss

让我们开始...

创建3种不同的形式组件

用户名和电子邮件

// UserNameEmail.js
import React from 'react'

const UserNameEmail = (props) => {
    const {data,handleChange} = props

    return (
        <div className="max-w-xs md:max-w-lg mx-auto">
            <form className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
                <div className="mb-10">
                    <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="name">
                        Username
                    </label>
                    <input className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" name="name" type="text" placeholder="Username..." value={data.name} onChange={handleChange} />
                </div>
                <div>
                    <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="email">
                        Email
                    </label>
                    <input className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" name="email" type="email" placeholder="Email..." value={data.email} onChange={handleChange} />
                </div>
            </form>
        </div>
    )
}

export default UserNameEmail

我们创建了一个带有名称和电子邮件输入字段的表格。
使用道具，我们正在访问我们将与其他状态一起在主要组件中创建的数据对象和处理方法。
然后，我们已经将处理方法传递给了onchange事件处理程序和数据值。

多布和性别

// DobGender.js
import React from 'react'

const DobGender = (props) => {
    const {data,handleChange} = props
    return (
        <div className="max-w-xs md:max-w-lg mx-auto">
            <form className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
                <div className="inline-block relative w-64 mb-10">
                    <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="gender">
                        Gender
                    </label>
                    <select className="block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" name='gender' value={data.gender} onChange={handleChange}>
                        <option value="male">Male</option>
                        <option value="female">Female</option>
                    </select>
                </div>
                <div>
                    <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="dob">
                        Dob
                    </label>
                    <input className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" name="dob" type="date"  value={data.dob} onChange={handleChange} />
                </div>
            </form>
        </div>
    )
}

export default DobGender

我们已经创建了一个具有性别的表格，作为选择输入字段，DOB作为日期输入字段。
使用道具，我们正在访问我们将与其他状态一起在主要组件中创建的数据对象和处理方法。
然后，我们已经将处理方法传递给了onchange事件处理程序和数据值。

地址

// Address.js
import { useState, useEffect } from 'react'

const Address = (props) => {
    const { data,setData } = props

    const [fullAddress, setFullAddress] = useState({
        house: "",
        locality: "",
        city: "",
        state: "",
        zip: "",
    })

    const handleAddressChange = (event) => {
        const { name, value } = event.target;
        setFullAddress({
            ...fullAddress,
            [name]: value,
        });
    };

    useEffect(() => {
        const isDataEmpty = () => {
            for (const key in fullAddress) {
                if (fullAddress[key].trim() === "") {
                    return true; // At least one property is empty
                }
            }
            return false; // All properties have values
        };
        if(!isDataEmpty()) {
            setData({
                ...data,
                address:fullAddress
            })
        }
    }, [fullAddress])

    return (
        <form className="w-full max-w-lg mx-auto bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
            <div className="flex flex-wrap -mx-3 mb-6">
                <div className="w-full md:w-1/2 px-3 mb-6 md:mb-0">
                    <label className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" htmlFor="house-no">
                        House no.
                    </label>
                    <input className="appearance-none block w-full bg-gray-200 text-gray-700 border rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" name="house" type="text" placeholder="house no." value={fullAddress.house} onChange={handleAddressChange} />
                </div>
                <div className="w-full md:w-1/2 px-3 mb-6 md:mb-0">
                    <label className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" htmlFor="locality">
                        Locality
                    </label>
                    <input className="appearance-none block w-full bg-gray-200 text-gray-700 border rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" name="locality" type="text" placeholder="locality" value={fullAddress.locality} onChange={handleAddressChange} />
                </div>
            </div>

            <div className="flex flex-wrap -mx-3 mb-2">
                <div className="w-full md:w-1/3 px-3 mb-6 md:mb-0">
                    <label className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" htmlFor="city">
                        City
                    </label>
                    <input className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" name="city" type="text" placeholder="city" value={fullAddress.city} onChange={handleAddressChange} />
                </div>
                <div className="w-full md:w-1/3 px-3 mb-6 md:mb-0">
                    <label className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" htmlFor="state">
                        State
                    </label>
                    <input className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" name="state" type="text" placeholder="state" value={fullAddress.state} onChange={handleAddressChange} />
                </div>
                <div className="w-full md:w-1/3 px-3 mb-6 md:mb-0">
                    <label className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" htmlFor="zip">
                        Zip
                    </label>
                    <input className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" name="zip" type="text" placeholder="zip code" value={fullAddress.zip} onChange={handleAddressChange} />
                </div>
            </div>
        </form>
    )
}

export default Address

这是有趣的，因为地址有5个输入字段，我们无法在此处直接设置处理程序，而是我们创建了另一个状态，该状态具有5个属性，用于完整地址。
然后创建了使用效应，检查FullAddress对象的所有属性是否具有值，如果是正确的，我们将将原始数据地址属性设置为完整地址状态。

主组件

// MainForm.js
"use client";
import { useState } from 'react'
import UserNameEmail from './UserNameEmail'
import DobGender from './DobGender'
import Address from './Address'

const MainForm = () => {
    const [data, setData] = useState({
        name: "",
        email: "",
        dob: "",
        gender: "male",
        address: "",
    })

    const handleChange = (event) => {
        const { name, value } = event.target;
        setData({
            ...data,
            [name]: value,
        });
    };


    const [activeTab, setActiveTab] = useState(0)

    const formElements = [
        <UserNameEmail data={data} handleChange={handleChange} />,
        <DobGender data={data} handleChange={handleChange} />,
        <Address data={data} setData={setData} />
    ]

    return (
        <div className='min-h-screen flex flex-col justify-center bg-slate-900'>
            <div>
                {
                    formElements[activeTab]
                }
            </div>
            <div className='flex flex-wrap gap-x-6 mx-auto'>
                <button
                    disabled={activeTab === 0 ? "disabled" : ""}
                    onClick={() => setActiveTab(prev => prev - 1)}
                    className={`px-4 py-2 rounded-xl bg-blue-600 text-white ${activeTab === 0 ? "opacity-50 bg-slate-600" : "opacity-100"}`}>
                    Back
                </button>
                <button
                    disabled={activeTab === formElements.length - 1 ? "disabled" : ""}
                    onClick={() => setActiveTab(prev => prev + 1)}
                    className={`px-4 py-2 rounded-xl bg-blue-600 text-white ${activeTab === formElements.length - 1 ? "opacity-50 bg-slate-600" : "opacity-100"}`}>Next</button>
                {
                    activeTab === formElements.length - 1 ? <button className='px-4 py-2 rounded-xl bg-blue-600 text-white' onClick={() => console.log(data)}>Submit</button> : null
                }
            </div>
        </div>
    )
}

export default MainForm

首先，我们已经进口了表单组件
然后使用USESTATE钩初始化一个称为数据的状态变量。数据是一个对象，代表具有名称，电子邮件，DOB，性别和地址的默认值的表单数据。
HandleChange功能负责在输入字段更改时更新表单数据。它从事件目标（通常是输入字段）中提取名称和值属性，并使用传播操作员更新数据状态，以将新值与现有数据合并。
另一个状态变量Activetab的初始化为0。此变量用于跟踪表单中当前活动的步骤/选项卡。
创建了一个称为Formelements的数组，其中包含表单步骤的JSX元素。每个步骤均由一个组件（用户邮件，dobgender和Address）表示，其中包含表单数据和处理的功能。
我们使用的是Activetab状态值与Formelement阵列一起使用特定的索引值（0-> usernameemail，1-> dobgender，2->地址）
然后，我们创建了2个按钮，背部和下一个按钮将增加/减少Activetab值1个更改组件，我们还将禁用返回按钮，如果Activetab为0，并且如果Activetab等于Activetab，则禁用Next按钮到弹性数组长度-1，这是数组中的最后一个元素。
最后，我们有一个提交按钮，只有在表单处于最后一步时才会出现，我们只是在提交按钮上放置一个控制台日志语句，您可以根据需要处理提交。

随时在评论中提出建议，以改善组件并使其更加可重复和高效。
感谢您检查此帖子
您可以与我联系 -
Instagram -https://www.instagram.com/supremacism__shubh/
LinkedIn -https://www.linkedin.com/in/shubham-tiwari-b7544b193/
电子邮件-shubhmtiwri00@gmail.com

^^您可以在下面的链接上为我提供一些捐款，谢谢^^^
- > https://www.buymeacoffee.com/waaduheck < -

也检查这些帖子
https://dev.to/shubhamtiwari909/website-components-you-should-know-25nm

https://dev.to/shubhamtiwari909/smooth-scrolling-with-js-n56

https://dev.to/shubhamtiwari909/swiperjs-3802

https://dev.to/shubhamtiwari909/custom-tabs-with-sass-and-javascript-4dej