วิธีสร้างแบบฟอร์มที่ใช้งานง่ายโดยใช้ Chakra UI ใน React

การจัดสไตล์แอปพลิเคชันด้วย CSS แบบกำหนดเองนั้นสนุกจนกว่าโปรเจ็กต์จะมีความซับซ้อนมากขึ้น ความท้าทายอยู่ที่การออกแบบและรักษาการออกแบบที่สอดคล้องกันตลอดทั้งแอปพลิเคชัน

การใช้ไลบรารีสไตล์อินเทอร์เฟซผู้ใช้ (UI) เช่น Chakra UI อาจพิสูจน์ได้ว่าเป็นแนวทางที่มีประสิทธิภาพมากกว่าเมื่อเปรียบเทียบกับการใช้ Cascading Style Sheets (CSS) เพียงอย่างเดียว ไลบรารีเหล่านี้มีข้อได้เปรียบในการนำเสนอวิธีการที่รวดเร็วในการปรับปรุงลักษณะที่ปรากฏของแอปพลิเคชัน ผ่านการจัดเตรียมองค์ประกอบ UI ที่กำหนดไว้ล่วงหน้าและคุณสมบัติที่มีประโยชน์

เริ่มต้นใช้งาน Chakra UI ใน React Applications

หากต้องการเริ่มต้นใช้งาน Chakra UI ให้ดำเนินการต่อและนั่งร้านแอปพลิเคชัน React พื้นฐานโดยใช้คำสั่ง create-react-app หรือคุณสามารถใช้ Vite เพื่อสร้างโปรเจ็กต์ React

ถัดไป ติดตั้งการขึ้นต่อกันเหล่านี้:

 npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion 

ซอร์สโค้ดสำหรับโปรเจ็กต์นี้อยู่ภายในพื้นที่เก็บข้อมูล GitHub โดยเฉพาะ ซึ่งสามารถเข้าถึงได้โดยผู้มีส่วนได้เสียที่ต้องการตรวจสอบหรือสนับสนุนการพัฒนา

เพิ่มผู้ให้บริการธีมของ Chakra

หลังจากติดตั้งการขึ้นต่อกันที่จำเป็นเรียบร้อยแล้ว จำเป็นต้องล้อมรอบแอปพลิเคชันโดยใช้ ChakraProvider ขั้นตอนนี้อาจดำเนินการได้โดยการรวมผู้ให้บริการไว้ในไฟล์ใดๆ ข้างต้น เช่น index.jsx, main.jsx หรือ App.jsx รหัสสำหรับการดำเนินการดังกล่าวจะมีลักษณะคล้ายกับตัวอย่างที่ให้ไว้ด้านล่าง:

 import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import { ChakraProvider } from '@chakra-ui/react'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <ChakraProvider>
      <App/>
    </ChakraProvider>
  </React.StrictMode>,
)

เพื่อให้สามารถเข้าถึงส่วนประกอบและคุณสมบัติการจัดสไตล์ของ Chakra UI ภายในขอบเขตของแอปพลิเคชันทั้งหมด จำเป็นต้องล้อมโค้ดแอปพลิเคชันทั้งหมดด้วย ChakraProvider

สลับธีมที่แตกต่าง

Chakra UI มอบธีมที่สร้างไว้ล่วงหน้าเริ่มต้นซึ่งรวมถึงการรองรับโหมดสว่าง มืด และโหมดสีของระบบ อย่างไรก็ตาม คุณสามารถปรับแต่งธีม UI ของแอปพลิเคชันและคุณสมบัติสไตล์อื่นๆ ภายในออบเจ็กต์ธีมได้ตามที่ระบุไว้ใน เอกสารของ Chakra

เพื่ออำนวยความสะดวกในการสลับระหว่างโทนสีสลัวและสว่าง จำเป็นต้องสร้างส่วนประกอบ ThemeToggler ภายในโฟลเดอร์’ส่วนประกอบ’ที่อยู่ภายในไดเร็กทอรี’src’การรวมรหัสที่ให้มาจะเปิดใช้งานฟังก์ชันนี้

 import React from 'react'
import { useColorMode, Box, IconButton} from '@chakra-ui/react';
import { SunIcon, MoonIcon } from '@chakra-ui/icons'

export default function ThemeToggler() {
    const { colorMode, toggleColorMode } = useColorMode();

    return (
        <Box textAlign="center" py={4} >
          <IconButton
            icon={colorMode === 'light' ? <MoonIcon/> : <SunIcon/>}
            onClick={toggleColorMode}
            variant="ghost"/>
          <h2>Toggle Theme</h2>
        </Box>
    );
} 

แน่นอน! หากต้องการดำเนินการนำเข้าแพ็คเกจไอคอนต่อไป โปรดดำเนินการคำสั่งต่อไปนี้ในตัวแก้ไขโค้ดของคุณหรือ IDE:pythonimport Icons_packageThis จะช่วยให้คุณใช้คุณสมบัติที่แพ็คเกจมีให้ภายในโปรเจ็กต์ของคุณ

 npm i @chakra-ui/icons 

ส่วนประกอบ ThemeToggler ได้รับการออกแบบมาเพื่อแสดงองค์ประกอบสลับ ทำให้ผู้ใช้สามารถสลับระหว่างโครงร่างภาพที่ตัดกันภายในแอปพลิเคชันได้อย่างง่ายดาย โดยเลือกจากตัวเลือกที่มี เช่น “สว่าง” หรือ “มืด” คุณสมบัตินี้มอบประสบการณ์ผู้ใช้ที่ปรับเปลี่ยนได้และตอบสนองความต้องการของแต่ละบุคคล ในขณะที่ยังคงรักษาความสอดคล้องกับการออกแบบโดยรวมของแพลตฟอร์ม

องค์ประกอบเฉพาะนี้จะเรียกรูปแบบสีปัจจุบันจาก hook useColorMode และใช้ฟังก์ชัน toggleColorMode เพื่อสลับระหว่างการกำหนดค่าสีต่างๆ

ส่วนประกอบ IconButton ผสมผสานรูปลักษณ์ที่น่าดึงดูดและความสามารถในการจดจำของไอคอนเข้ากับฟังก์ชันเชิงโต้ตอบของปุ่มได้อย่างมีประสิทธิภาพ โดยผสานองค์ประกอบทั้งสองนี้เข้าด้วยกันอย่างลงตัวเพื่อสร้างองค์ประกอบอินเทอร์เฟซผู้ใช้อเนกประสงค์ที่สามารถรวมเข้ากับบริบทการออกแบบต่างๆ ได้อย่างง่ายดาย

สร้าง UI แบบฟอร์มเข้าสู่ระบบ

โปรดสร้างไฟล์ใหม่ชื่อ “Login.jsx” ภายในโฟลเดอร์ “components” และวางข้อมูลโค้ดต่อไปนี้ลงไป:

ขั้นแรก ให้เพิ่มการนำเข้าเหล่านี้

 import React, { useState } from 'react';

import {
     Box,
    Button,
    Card,
    CardBody,
    Center,
    Flex,
    FormControl,
    FormLabel,
    Heading,
    HStack,
    Input,
    Stack,
    VStack,
    useColorMode,
} from '@chakra-ui/react'; 

หลังจากการนำเข้าส่วนประกอบ UI ดังกล่าว เราควรวิเคราะห์เอนทิตีการทำงานของ React และโครงสร้างตัวรับหลักซึ่งจะห่อหุ้มองค์ประกอบทั้งหมดที่จำเป็นสำหรับอินเทอร์เฟซผู้ใช้แบบกราฟิกสำหรับการเข้าสู่ระบบ

 function Login() {
    const { colorMode } = useColorMode();

    return (
        <Box>
            <Flex justify="center" align="center" height="80vh" >
                <Center>
                    <Stack>
                    </Stack>
                </Center>
            </Flex>
        </Box>
    );
}

export default Login; 

ส่วนประกอบ Box เป็นพื้นฐานในการแสดงองค์ประกอบ div และถือเป็นรากฐานสำหรับการสร้างส่วนประกอบ Chakra UI อื่นๆ ทั้งหมด ในทางตรงกันข้าม Flex แสดงถึงอินสแตนซ์ของส่วนประกอบ Box ที่มีคุณสมบัติการแสดงผลถูกตั้งค่าเป็น flex ซึ่งช่วยให้สามารถจัดสไตล์ผ่านการใช้คุณสมบัติ flex ได้

แม้ว่าส่วนประกอบ Center และ Stack จะทำหน้าที่เป็นเครื่องมือเค้าโครง แต่ก็แสดงให้เห็นถึงความแตกต่างเล็กน้อยในฟังก์ชันการทำงาน โดยเฉพาะอย่างยิ่ง คอมโพเนนต์ Center มุ่งเน้นไปที่การวางตำแหน่งลูกทั้งหมดไว้ที่จุดศูนย์กลาง ในขณะที่คอมโพเนนต์ Stack จะรวมองค์ประกอบอินเทอร์เฟซผู้ใช้และรวมระยะห่างระหว่างองค์ประกอบ

ตอนนี้เราจะสร้างส่วนหัวของแบบฟอร์มของเราโดยใช้ส่วนประกอบ Header ซึ่งจะช่วยอำนวยความสะดวกในงานนี้ได้อย่างมีประสิทธิภาพ เพื่อให้บรรลุเป้าหมายนี้ เราอาจแทรกโค้ดที่กล่าวมาข้างต้นภายในขอบเขตของคอมโพเนนต์ Stack

 <VStack spacing='6'>
    <Heading
        fontWeight='500'
        fontSize='30px'
        letterSpacing='-0.5px'
    >
        Login
    </Heading>
 </VStack> 

องค์ประกอบ VStack จะจัดเรียงองค์ประกอบรองในแนวตั้งภายในเค้าโครง จากนั้น ให้สร้างองค์ประกอบการ์ดเพื่อแนบแบบฟอร์มเข้าสู่ระบบและส่วนประกอบที่เกี่ยวข้อง

 <Card bg='#f6f8fa' variant='outline' borderColor='#d8dee4' w='308px'
 size="lg" borderRadius={8} boxShadow="lg"
>
  <CardBody>
    <form>
      <Stack spacing='4'>
        <FormControl isRequired>
          <FormLabel size='sm'
            color={colorMode === 'dark' ? 'black' : 'black'}
          >Email Address</FormLabel>

          <Input
            type='text'
            bg='white'
            borderColor='#d8dee4'
            size='sm'
            borderRadius='6px'
            color={colorMode === 'dark' ? 'black' : 'black'}
            value={email}
          />
        </FormControl>

        <FormControl isRequired>
          <HStack justify='space-between'>
            <FormLabel size='sm'
              color={colorMode === 'dark' ? 'black' : 'black'}
            >Password</FormLabel>

            <Button
              as='a'
              href='#'
              variant='link'
              size='xs'
              color='#0969da'
              fontWeight='500'
            >
              Forgot password?
            </Button>
          </HStack>

          <Input
            type='password'
            bg='white'
            borderColor='#d8dee4'
            size='sm'
            borderRadius='6px'
            color={colorMode === 'dark' ? 'black' : 'black'}
            value={password}
          />
        </FormControl>

        <Button
          type="submit"
          bg='#2da44e'
          color='white'
          size='sm'
          _hover={{ bg: '#2c974b' }}
          _active={{ bg: '#298e46' }}
        >
          Sign in
        </Button>
      </Stack>
    </form>
  </CardBody>
 </Card> 

อย่าลังเลที่จะแก้ไขไฟล์ App.js ของคุณโดยผสมผสานทั้งองค์ประกอบ Login และ ThemeToggler หากคุณยังไม่ได้ดำเนินการ

 import React from 'react'
import Login from './components/login'
import ThemeToggler from './components/ThemeToggler'

export default function App() {
  return (
    <div>
     <ThemeToggler/>
     <Login/>
    </div>
  )
} 

เยี่ยมมาก การเปิดใช้งานเซิร์ฟเวอร์การพัฒนาจะช่วยให้เราสามารถใช้การแก้ไขใดๆ ที่ทำกับโค้ดเบสได้

 npm run dev 

เมื่อโหลดหน้าเว็บในเว็บเบราว์เซอร์ โดยทั่วไปการนำเสนอเริ่มต้นจะเป็นของธีมโหมดแสงเริ่มต้น

โปรดคลิกที่ปุ่ม"สลับธีม"ที่อยู่ด้านบนของหน้าจอเพื่อสลับระหว่างธีมสีต่างๆ เพื่อประสบการณ์ที่ดึงดูดสายตายิ่งขึ้น

การจัดการสถานะแบบฟอร์มโดยใช้ React Hooks

เพื่อแสดงแบบฟอร์มเข้าสู่ระบบด้วยฟังก์ชันการทำงาน เราจะแนะนำการจัดการสถานะโดยใช้ React Hooks เป็นวิธีหลักที่เราเลือกในการจัดการสถานะแอปพลิเคชันอย่างมีประสิทธิภาพ

เพื่อกำหนดสถานะต่างๆ ภายในองค์ประกอบการทำงาน เข้าสู่ระบบ เราสามารถใช้เทคนิคการเขียนโปรแกรมที่หลากหลาย ตัวอย่างเช่น สามารถใช้คำสั่งแบบมีเงื่อนไข เช่น ส่วนคำสั่ง if-else หรือกรณีสวิตช์เพื่อกำหนดสถานะที่ควรใช้งานโดยอิงตามอินพุตของผู้ใช้หรือปัจจัยภายนอกอื่นๆ นอกจากนี้ ไลบรารีการจัดการสถานะ เช่น Redux หรือ MobX ยังสามารถใช้เพื่อจัดการและอัปเดตสถานะเหล่านี้ในลักษณะที่มีการจัดระเบียบมากขึ้นอีกด้วย ท้ายที่สุดแล้ว วิธีการเฉพาะจะขึ้นอยู่กับข้อกำหนดและความซับซ้อนของแอปพลิเคชันที่กำลังพัฒนา

 const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [success, setSuccess] = useState('');
const [error, setError] = useState('');
const [isLoading, setIsLoading] = useState(false);
const [isLoggedIn, setIsLoggedIn] = useState(false); 

ต่อจากนั้น รวมฟังก์ชันตัวจัดการเหตุการณ์ onChange ซึ่งจะตรวจสอบการเปลี่ยนแปลงที่เกิดขึ้นกับองค์ประกอบอินพุต บันทึกค่า และปรับเงื่อนไขอีเมลและรหัสผ่านตามความจำเป็น

พิจารณารวมข้อมูลโค้ดต่อไปนี้ลงในช่องป้อนข้อมูลที่กล่าวมาข้างต้นเพื่อปรับปรุงฟังก์ชันการทำงานและประสบการณ์ผู้ใช้

 onChange={(e)=> { setEmail(e.target.value)}}
onChange={(e)=> { setPassword(e.target.value)}} 

การใช้งานที่ได้รับการแก้ไขจะรวบรวมข้อมูลจากผู้ใช้ได้อย่างมีประสิทธิภาพ

การใช้การตรวจสอบความถูกต้องของแบบฟอร์มและการจัดการข้อผิดพลาดด้วยคุณสมบัติในตัวของ Chakra UI €™

แน่นอน! นี่คือตัวอย่างวิธีที่คุณสามารถนำไปใช้ในโค้ด HTML ของคุณ:html function handleSearch(event) {event.preventDefault();//ป้องกันพฤติกรรมการส่งแบบฟอร์มเริ่มต้น const apiKey=‘YOUR_API_KEY’;//แทนที่ด้วย API keyconst startDate=new Date(‘2023-01-01’);//ตั้งค่าช่วงวันที่ค้นหาconst endDate=วันที่ใหม่ (‘2023-04-30’);//ตั้งค่าช่วงวันที่ค้นหาconst market=‘USD’;//กำหนดสกุลเงินสำหรับการคำนวณอัตราแลกเปลี่ยน//

 <form onSubmit={handleSubmit}> 

ต่อมา สร้างข้อกำหนดการทำงานสำหรับเมธอด handleSubmit ทันทีภายใต้การกำหนดค่าสถานะที่ได้รับการอธิบาย ให้รวมบล็อกโค้ดที่ตามมา

 const handleSubmit = async event => {
    event.preventDefault();
    setIsLoading(true);

     try {
        await userLogin({ email, password });
        setSuccess('Logged in successfully!');
        setIsLoading(false);
        setIsLoggedIn(true);
    } catch (error) {
        setError('Invalid username or password!');
        setIsLoading(false);
        setEmail('');
        setPassword('');
    }
}; 

ฟังก์ชัน handleSubmit แบบอะซิงโครนัสจะเปิดใช้งานเมื่อมีการส่งแบบฟอร์ม และจะตั้งค่าสถานะการโหลดเป็นจริงสำหรับการจำลองการดำเนินการประมวลผล หากต้องการแสดงสิ่งนี้ให้ผู้ใช้เห็น คุณอาจแสดงตัวโหลดของ Chakra UI ภายในอินเทอร์เฟซแอปพลิเคชันของคุณ

นอกจากนี้ เมื่อส่งข้อมูลแบบฟอร์มโดยฟังก์ชัน handleSubmit มันจะเรียกใช้ฟังก์ชัน userLogin ซึ่งยอมรับที่อยู่อีเมลและรหัสผ่านเป็นพารามิเตอร์อินพุตเพื่อวัตถุประสงค์ในการตรวจสอบ

จำลองคำขอ API การตรวจสอบสิทธิ์

เพื่อให้มั่นใจในความถูกต้องของข้อมูลอินพุตที่ผู้ใช้ป้อน เราอาจสร้างคำขอ API จำลองผ่านการใช้งานฟังก์ชัน userLogin() ซึ่งจะประเมินความถูกต้องของข้อมูลการเข้าสู่ระบบตามมาตรฐานที่คาดหวังจากส่วนหลัง เซิร์ฟเวอร์

ด้านล่างฟังก์ชัน handleSubmit ให้รวมข้อมูลโค้ดต่อไปนี้:

 const userLogin = async ({ email, password }) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (email === '[email protected]' && password === 'password') {
                resolve();
            } else {
                reject();
            }
        }, 1000);
    });
}; 

รหัสปัจจุบันแสดงฟังก์ชันแบบอะซิงโครนัสซึ่งรวมถึงการตรวจสอบเหตุผลเชิงตรรกะอย่างตรงไปตรงมา

ข้อผิดพลาดในการจัดการคุณสมบัติ UI ของ Chakra

เมื่อพิจารณาถึงปฏิสัมพันธ์ของคุณกับแบบฟอร์มและใช้ประโยชน์จากไลบรารี UI ของ Chakra คุณอาจเสนอการตอบกลับที่มีข้อมูลเป็นภาพผ่านส่วนประกอบคำติชม เพื่อเริ่มต้นกระบวนการนี้ ให้เริ่มด้วยการนำเข้าส่วนประกอบเฉพาะเหล่านั้นจากแหล่งทรัพยากรของจักระ

 Alert, AlertIcon, AlertTitle, CircularProgress
{error && !isLoggedIn &&
     <Alert status='error' variant='solid'>
       <AlertIcon />
      <AlertTitle>{error}</AlertTitle>
     </Alert>
}
{isLoggedIn && (
     <Alert status="success" variant='solid'>
      <AlertIcon/>
      <AlertTitle>{success}</AlertTitle>
    </Alert>
)} 

สุดท้าย รวม CircularProgress ซึ่งเป็นส่วนประกอบตัวหมุนโหลดภายในปุ่มส่งโดยใช้การปรับเปลี่ยนต่อไปนี้:

 {isLoading
 ? (<CircularProgress isIndeterminate size="24px" color="teal"/>)
 : ('Sign In')} 

เมื่อเข้าสู่ระบบสำเร็จ ผู้ใช้จะพบกับอินเทอร์เฟซต่อไปนี้:

หากมีปัญหาเกิดขึ้นระหว่างขั้นตอนการรับรองความถูกต้อง ผู้ใช้จะได้รับข้อความทักทายในลักษณะนี้:

ปรับปรุงกระบวนการพัฒนาของคุณด้วย Chakra UI

Chakra UI นำเสนอองค์ประกอบอินเทอร์เฟซผู้ใช้ที่สร้างขึ้นอย่างหรูหราและปรับแต่งได้หลากหลาย ซึ่งอำนวยความสะดวกในการสร้างอินเทอร์เฟซ React ที่รวดเร็วยิ่งขึ้น ไม่ว่าข้อกำหนดการออกแบบของคุณจะเป็นพื้นฐานหรือซับซ้อนก็ตาม Chakra ครอบคลุมส่วนประกอบที่สามารถรองรับฟังก์ชัน UI เกือบทุกฟังก์ชันที่เป็นไปได้