스킬 formik-patterns
📝
formik-patterns
안전 🌐
네트워크 접근📁
파일 시스템 액세스⚙️
외부 명령어
使用 Formik 建立 React 表單
在 React 中建立表單需要處理驗證、狀態和提交。本技能提供經過驗證的 Formik 模式，使用 Yup 結構描述建立可存取且已驗證的表單。
지원: Claude Code(CC)
1
스킬 ZIP 다운로드
2
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
3
토글을 켜고 사용 시작
테스트해 보기
"formik-patterns" 사용 중입니다. 建立包含電子郵件、密碼和確認密碼欄位的註冊表單
예상 결과:
- 使用 Yup 驗證搭配 .matches() 來設定密碼要求
- 新增 .oneOf([yup.ref('password')]) 用於確認密碼
- 為編輯表單設定 enableReinitialize: true
- 當表單無效或提交中時停用提交按鈕
"formik-patterns" 사용 중입니다. 示範如何正確處理表單錯誤
예상 결과:
- 顯示錯誤前先檢查 formik.touched[field]
- 在 onSubmit 處理常式中使用 try/catch 搭配 finally
- 在 finally 區塊中設定 formik.setSubmitting(false)
- 顯示 toast 通知以提供使用者回饋
보안 감사
안전v5 • 1/16/2026
Pure documentation skill containing only Formik code examples and patterns. No executable code, network calls, file system access, or command execution. Static findings are false positives from markdown code blocks and regex validation patterns being misidentified as security threats.
2
스캔된 파일
537
분석된 줄 수
3
발견 사항
5
총 감사 수
위험 요인
🌐 네트워크 접근 (1)
📁 파일 시스템 액세스 (1)
⚙️ 외부 명령어 (19)
SKILL.md:10-62 SKILL.md:62-68 SKILL.md:68-109 SKILL.md:109-113 SKILL.md:113-122 SKILL.md:122-128 SKILL.md:128-138 SKILL.md:138-142 SKILL.md:142-150 SKILL.md:150-154 SKILL.md:154-192 SKILL.md:192-196 SKILL.md:196-236 SKILL.md:236-240 SKILL.md:240-256 SKILL.md:256-260 SKILL.md:260-308 SKILL.md:308-312 SKILL.md:312-356
감사자: claude 감사 이력 보기 →
품질 점수
38
아키텍처
100
유지보수성
85
콘텐츠
21
커뮤니티
100
보안
91
사양 준수
만들 수 있는 것
登入和驗證表單
使用電子郵件驗證、密碼要求和錯誤處理建立安全的登入表單。
資料輸入表單
建立可提交至 GraphQL API 的表單，包含適當的載入狀態和錯誤回饋。
複雜的多步驟精靈
實作包含步驟驗證和導航功能的結帳流程和入職精靈。
이 프롬프트를 사용해 보세요
基本表單設定
示範如何使用 Formik 建立登入表單，並使用 Yup 進行電子郵件和密碼驗證。
欄位驗證
如何為密碼欄位建立 Yup 驗證結構描述，要求包含大寫、小寫、數字，且最少 8 個字元？
表單提交
撰寫提交至 GraphQL 變更的 Formik 表單，包含適當的 onCompleted 和 onError 處理常式。
多步驟表單
如何使用 Formik 實作多步驟表單，其中每個步驟都有自己的驗證結構描述？
모범 사례
- 僅在欄位被觸控後顯示驗證錯誤，以減少干擾
- 在提交中且表單無效時停用提交按鈕
- 處理變更提交中的 onCompleted 和 onError 回呼
피하기
- 在使用者互動前立即顯示驗證錯誤
- 在非同步提交期間保持提交按鈕啟用
- 在表單提交處理常式中跳過錯誤處理
자주 묻는 질문
支援哪些版本的 React 和 Formik？
支援 React 16.8+（勾點）和 Formik 2.x。Yup 用於驗證。
我可以在這些模式中使用 TypeScript 嗎？
可以。所有程式碼範例都與 TypeScript 相容，並為 formik.values 提供正確的類型定義。
如何與 UI 元件庫整合？
欄位輔助模式可與任何 UI 庫搭配使用。將 {...getFieldProps('fieldName')} 傳遞給您的 Input 元件。
我的表單資料會傳送到任何地方嗎？
不會。本技能僅提供模式。表單資料保留在您的應用程式中，由您的程式碼處理。
為什麼我的驗證錯誤沒有顯示？
確保在欄位上呼叫 handleBlur，並在顯示錯誤前檢查 formik.touched[field]。
這與 React Hook Form 有什麼不同？
Formik 為基本表單提供更簡單的 API。React Hook Form 在具有許多欄位的複雜表單中效能更好。