inertia-rails-forms

仓库: inertia-rails/skills
安装量: 58
排名: #12912

安装

npx skills add https://github.com/inertia-rails/skills --skill inertia-rails-forms

Inertia Rails Forms Full-stack form handling for Inertia.js + Rails. Before building a form, ask: Simple create/edit? →

component (no state management needed) Requires per-field UI elements? → Still . React useState for UI state (preview URL, file size display) is independent of form data — handles the submission; useState handles the UI. Multi-step wizard, dynamic fields (add/remove inputs), or form data shared with sibling components (e.g., live preview panel)? → useForm hook Tempted by react-hook-form? → Don't. Inertia's already handles CSRF tokens, redirect following, error mapping from Rails, processing state, file upload detection, and history state. react-hook-form would duplicate or fight all of this. When NOT to use or useForm : Data lookups — not a form submission. Use router.get with debounce + preserveState , or raw fetch for large datasets Inline single-field edits without navigation – router.patch directly, or useForm if you need error display on the field NEVER: Use react-hook-form , vee-validate , or sveltekit-superforms — Inertia already handles CSRF, redirect following, error mapping, processing state, and file detection. These libraries fight Inertia's request lifecycle. Pass data={...} to — it has no data prop. Data comes from input name attributes automatically. data is a useForm concept. Use useForm for simple create/edit — handles these without state management. Reserve useForm for multi-step wizards, dynamic add/remove fields, or form data shared with sibling components. Use controlled value= instead of defaultValue on inputs — controlled inputs bypass 's dirty tracking, making isDirty always false . Omit value="1" on checkboxes — without it, the browser submits "on" and Rails won't cast to boolean correctly. Call useForm inside a loop or conditional — it's a hook (React rules apply). Create one form instance per logical form. Component (Preferred) The simplest way to handle forms. Collects data from input name attributes automatically — no manual state management needed. has NO data prop — do NOT pass data={...} (that's a useForm concept). For edit forms, use defaultValue on inputs. Use render function children {({ errors, processing }) => (...)} to access form state. Plain children work but give no access to errors, processing, or progress. import { Form } from '@inertiajs/react' export default function CreateUser ( ) { return ( < Form method = " post " action = " /users " > { ( { errors , processing } ) => ( < > < input type = " text " name = " name " /> { errors . name && < span className = " error " > { errors . name } } < input type = " email " name = " email " /> { errors . email && < span className = " error " > { errors . email } } < button type = " submit " disabled = { processing } > { processing ? 'Creating...' : 'Create User' } ) } ) } // Plain children — valid but no access to errors/processing/progress: // // // //
Delete Form < Form method = " delete " action = { ` /posts/ ${ post . id } ` } > { ( { processing } ) => ( < button type = " submit " disabled = { processing } > { processing ? 'Deleting...' : 'Delete Post' } ) } Key Render Function Properties Property Type Purpose errors Record Validation errors keyed by field name processing boolean True while request is in flight progress { percentage: number } | null Upload progress (file uploads only) hasErrors boolean True if any errors exist wasSuccessful boolean True after last submit succeeded recentlySuccessful boolean True for 2s after success — ideal for "Saved!" feedback isDirty boolean True if any input changed from initial value reset (...fields) => void Reset specific fields or all fields clearErrors (...fields) => void Clear specific errors or all errors Additional
props ( errorBag , only , resetOnSuccess , event callbacks like onBefore , onSuccess , onError , onProgress ) are documented in references/advanced-forms.md — see loading trigger below. Edit Form (Pre-populated) Use method="patch" and uncontrolled defaults: Text/textarea → defaultValue Checkbox/radio → defaultChecked Select → defaultValue on