如何在 React 中使用 Chakra UI 構建用戶友好的表單
在項目變得越來越複雜之前，使用自定義 CSS 設置應用程序樣式非常有趣。挑戰在於在整個應用程序中設計樣式並保持一致的設計。
與僅依賴級聯樣式表 (CSS) 相比，使用 Chakra UI 等用戶界面 (UI) 樣式庫可能被證明是一種更有效的方法。這些庫的優點是通過提供預定的 UI 元素和有用的屬性，提供一種增強應用程序視覺外觀的快捷方法。
React 應用程序中的 Chakra UI 入門
要開始使用 Chakra UI，請繼續使用 create-react-app 命令搭建一個基本的 React 應用程序。或者，您可以使用 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 文檔 中指定。
為了促進暗淡和明亮配色方案之間的交替，有必要在位於“src”目錄中的“components”文件夾中建立一個 ThemeToggler 組件。包含所提供的代碼將啟用此功能。
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_package 這將允許您在項目中利用該包提供的功能。
npm i @chakra-ui/icons
ThemeToggler 組件旨在顯示切換元素，允許用戶通過選擇“亮”或“暗”等可用選項，在應用程序內的對比視覺方案之間輕鬆切換。此功能提供了適應性強的用戶體驗，滿足個人喜好，同時保持與平台整體設計的一致性。
這個特定的元素從useColorMode鉤子中檢索當前的顏色方案，並使用toggleColorMode函數在不同的顏色配置之間進行交替。
IconButton 組件有效地將圖標的視覺吸引力和可識別性與按鈕的交互功能結合起來，無縫地合併這兩個元素以創建可以輕鬆合併到各種設計環境中的多功能用戶界面元素。
創建登錄表單 UI
請在“components”文件夾中創建一個名為“Login.jsx”的新文件，並將以下代碼片段粘貼到其中:
首先，添加這些導入。
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 組件則聚合用戶界面元素並合併元素間間距。
我們現在將利用標題組件構建表單的標題部分，這應該非常有效地促進這項任務。為了實現這一點，可以在 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 子句或 switch case 之類的條件語句可用於根據用戶輸入或其他外部因素確定哪個狀態應處於活動狀態。此外，還可以使用 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 密鑰const startDate=new Date(‘2023-01-01’);//設置搜索日期範圍const endDate=new Date(‘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函數在提交表單時被激活，並將加載狀態設置為true以模擬處理操作。為了直觀地向用戶表明這一點，您可以在應用程序界面中顯示 Chakra UI 的加載微調器。
此外，在通過handleSubmit函數提交表單數據後，它將調用userLogin函數，該函數接受電子郵件地址和密碼作為輸入參數以進行驗證。
模擬身份驗證 API 請求
為了保證用戶輸入的輸入數據的合法性，可以通過userLogin()函數的實現創建一個模擬API請求，該請求按照後端期望的標準評估登錄信息的真實性服務器。
在“handleSubmit”函數下方，添加以下代碼片段:
const userLogin = async ({ email, password }) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (email === '[email protected]' && password === 'password') {
resolve();
} else {
reject();
}
}, 1000);
});
};
當前的代碼描述了一個異步函數，它包含邏輯推理的直接驗證。
Chakra 的錯誤處理 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 功能的組件。