React 低代碼項目：組件設計

Date: February 6, 2025

React表單組件

**目標：**使用 Ant Design 表單組件，開發登錄、注冊、搜索功能

內容：

使用 React 表單組件、受控組件
使用 Ant Design 表單組件
使用表單組件的校驗和錯誤提示，幾種方案

注意事項：

表單組件在 React 中比較特別，要單獨學習（在HTML也一樣）
注意接受并理解“受控組件”，雖然看似繁瑣

受控組件 vs 非受控組件

**受控組件：**值同步到 state，使用 value 屬性

受控組件是指表單元素的值由 React 組件的狀態（state） 完全控制的組件。也就是說，表單的輸入值存儲在組件的狀態中，任何用戶輸入都會觸發狀態更新，從而讓組件重新渲染。

特點：

受控組件的值總是由 React 狀態（state）驅動。
表單控件（如 input, select, textarea）的值由 state 來管理，而不是通過 DOM 操作。
用戶在表單中的輸入通過事件（如 onChange）更新組件的狀態，進而影響輸入框的值。

工作流程：

用戶在表單控件中輸入內容。
onChange 事件觸發，更新組件的 state。
React 重新渲染組件，更新表單控件的值。

Case：

import React, { useState } from 'react';const ControlledInput = () => {// 使用 state 來控制輸入框的值const [inputValue, setInputValue] = useState('');// 處理輸入框的變化const handleChange = (e) => {setInputValue(e.target.value);  // 更新 state};return (<div><label>輸入框：<inputtype="text"value={inputValue}  // 受控組件的值來自 stateonChange={handleChange}  // 處理用戶輸入/></label><p>輸入的值: {inputValue}</p></div>);
};export default ControlledInput;

解釋：

value={inputValue}：輸入框的值與 state 綁定。
onChange={handleChange}：每次用戶輸入時，handleChange 會更新 inputValue 狀態，React 會觸發重新渲染。

**非受控組件：**值不同步 state，使用 defaultValue 屬性

概念：

在 React 中，非受控組件是指表單元素的值由 DOM 自身管理，而不是由 React 的 state 來控制。你可以使用 ref 來直接訪問和修改表單元素的值。與受控組件不同，非受控組件不需要綁定 value 和 onChange 來處理輸入數據。

與受控組件不同，非受控組件不需要將輸入框的值綁定到 state，它直接操作 DOM。

Case：

import React, { useRef } from 'react';const UncontrolledInput = () => {const inputRef = useRef(); // 創建引用來訪問輸入框const handleSubmit = (e) => {e.preventDefault();alert('輸入的內容：' + inputRef.current.value); // 使用 ref 獲取輸入的值};return (<form onSubmit={handleSubmit}><label>輸入框：<input type="text" ref={inputRef} /> {/* 沒有綁定 state */}</label><br /><button type="submit">提交</button></form>);
};export default UncontrolledInput;

受控組件與非受控組件的對比：

特性	受控組件	非受控組件
值來源	值由組件的 `state` 控制	值由 DOM 元素本身控制，通過 `ref` 獲取
更新方式	通過 `onChange` 更新 `state`	通過 `ref` 獲取 DOM 元素的當前值
優點	- 組件狀態與視圖同步	- 代碼簡單，適用于不需要實時控制的表單
	- 可隨時訪問表單數據	- 性能較好，避免了頻繁的狀態更新
缺點	- 對于每個表單控件需要管理狀態，代碼較冗長	- 不適合需要動態交互或表單驗證的場景
適用場景	- 動態表單數據交互（如驗證、格式化等）	- 簡單的表單，數據獲取僅在提交時才需要

總結：

React 推薦使用受控組件，看似繁瑣，但更加可控

受控組件：值由 React 狀態控制，適合需要動態交互、驗證、格式化等場景。
非受控組件：值由 DOM 控制，適合簡單表單或不需要頻繁更新組件狀態的場景。

搜索框開發

思考要點：

搜索框的值應該傳遞到地址欄中。當其他組件需要使用時，可以通過該值來處理。

注意：不建議組件與組件之間直接傳值，來實現狀態切換。而是統一傳遞到地址欄，然后再獲取。

http://ocalhost:3000/manage/ist
http://localhost:3000/manage/list?keyword=hello
http://localhost:3000/manage/list?keyword=hello&page=2

設計要點：

傳遞搜索參數到URL（useNavigate）
URL搜索參數同步到搜索框（useSearchParams）

import React, { FC, useEffect, useState } from 'react'
import type { ChangeEvent } from 'react'
import { Input } from 'antd'
import { useNavigate, useLocation, useSearchParams } from 'react-router-dom'
import { LIST_SEARCH_PLACEHOLDER } from '../constant'const { Search } = Inputconst ListSearch: FC = () => {const nav = useNavigate()const { pathname } = useLocation()const [value, setValue] = useState('')const [searchParams] = useSearchParams()useEffect(() => {const keyword = searchParams.get(LIST_SEARCH_PLACEHOLDER) || ''setValue(keyword)// 每當 searchParams 變化時，更新 value}, [searchParams])function handleSearch(value: string) {nav({pathname,search: `${LIST_SEARCH_PLACEHOLDER}=${value}`,})}function handleChange(e: ChangeEvent<HTMLInputElement>) {setValue(e.target.value)}return (<Searchplaceholder="搜索"allowClearenterButton="搜索"size="middle"value={value}onChange={handleChange}onSearch={handleSearch}style={{ width: '260px' }}/>)
}export default ListSearch

注冊登陸頁開發

注冊頁開發

效果：

要點：

表單校驗實現
細節：標簽框長度設計

參考：標簽框長度設計

Register.tsx

import React, { FC } from 'react'
import styles from './Register.module.scss'
import { Typography, Space, Form, Input, Button } from 'antd'
import { Link } from 'react-router-dom'
import { UserAddOutlined } from '@ant-design/icons'
import { LOGIN_PATHNAME } from '../router'const { Title } = Typographyconst Register: FC = () => {function onFinish(values: {username: stringpassword: stringconfirm: stringnickname: string}) {console.log('Success:', values)}return (<div className={styles.container}><div><Space><Title level={2}><UserAddOutlined /></Title><Title level={2}>注冊新用戶</Title></Space></div><div><FormlabelCol={{ span: 8 }}wrapperCol={{ span: 16 }}onFinish={onFinish}><Form.Itemlabel="用戶名"name="username"rules={[{ required: true, message: '請輸入你的用戶名!' },{ min: 4, max: 20, message: '用戶名長度在 4-20 之間' },{pattern: /^[a-zA-Z0-9_]+$/,message: '用戶名只能由字母、數字和下劃線組成',},]}><Input /></Form.Item><Form.Itemlabel="密碼"name="password"rules={[{ required: true, message: '請輸入你的密碼!' }]}><Input.Password /></Form.Item><Form.Itemlabel="確認密碼"name="confirm"dependencies={['password']}rules={[{ required: true, message: '請再次輸入你的密碼!' },({ getFieldValue }) => ({validator(_, value) {if (!value || getFieldValue('password') === value) {return Promise.resolve()}return Promise.reject('兩次輸入的密碼不一致!')},}),]}><Input.Password /></Form.Item><Form.Itemlabel="昵稱"name="nickname"rules={[{ required: true, message: '請輸入你的昵稱!' }]}><Input /></Form.Item><Form.Item wrapperCol={{ offset: 8, span: 16 }}><Space><Button type="primary" htmlType="submit">注冊</Button><Link to={LOGIN_PATHNAME}>已有賬戶，請登陸</Link></Space></Form.Item></Form></div></div>)
}export default Register

登陸頁開發

效果：

要點：

用戶名、密碼記住存儲實現
useForm Hook 實現表單值同步

Login.tsx

import React, { FC, useEffect } from 'react'
import styles from './Register.module.scss'
import { Typography, Space, Form, Input, Button, Checkbox } from 'antd'
import { Link } from 'react-router-dom'
import { UserAddOutlined } from '@ant-design/icons'
import { REGISTER_PATHNAME } from '../router'const { Title } = Typographyconst USERNAME_KEY = 'USERNAME'
const PASSWORD_KEY = 'PASSWORD'function rememberUser(username: string, password: string) {localStorage.setItem(USERNAME_KEY, username)localStorage.setItem(PASSWORD_KEY, password)
}function deleteUserFromLocalStorage() {localStorage.removeItem(USERNAME_KEY)localStorage.removeItem(PASSWORD_KEY)
}function getUserFromLocalStorage() {return {username: localStorage.getItem(USERNAME_KEY),password: localStorage.getItem(PASSWORD_KEY),}
}const Login: FC = () => {const [form] = Form.useForm() // 第三方 hookuseEffect(() => {const { username, password } = getUserFromLocalStorage()form.setFieldsValue({ username, password })}, [])const onFinish = (values: {username: stringpassword: stringremember: boolean}) => {const { remember } = values || {}if (remember) {rememberUser(values.username, values.password)} else {deleteUserFromLocalStorage()}}return (<div className={styles.container}><div><Space><Title level={2}><UserAddOutlined /></Title><Title level={2}>登陸</Title></Space></div><div><FormlabelCol={{ span: 8 }}wrapperCol={{ span: 16 }}onFinish={onFinish}initialValues={{ remember: true }}form={form}><Form.Itemlabel="用戶名"name="username"rules={[{ required: true, message: '請輸入你的用戶名!' }]}><Input /></Form.Item><Form.Itemlabel="密碼"name="password"rules={[{ required: true, message: '請輸入你的密碼!' }]}><Input.Password /></Form.Item><Form.Itemname="remember"valuePropName="checked"wrapperCol={{ offset: 8, span: 16 }}><Checkbox>記住我</Checkbox></Form.Item><Form.Item wrapperCol={{ offset: 8, span: 16 }}><Space size="large"><Button type="primary" htmlType="submit">登陸</Button><Link to={REGISTER_PATHNAME}>注冊新用戶</Link></Space></Form.Item></Form></div></div>)
}export default Login