Inertia презентує новий компонент форм

Команда Laravel представила новий компонент <Form/> для Inertia, який "працює подібно до класичної HTML-форми, але використовує Inertia для уникнення повного перезавантаження сторінки"

Ось приклад із документації, що демонструє, як просто можна обробляти та надсилати дані форми за допомогою компонента Form в Inertia:

import { Form } from '@inertiajs/react'
 
export default () => (
  <Form action="/reports" method="post">
    <input type="text" name="name" />
    <textarea name="report[description]"></textarea>
    <input type="text" name="report[tags][]" />
    <input type="file" name="documents" multiple />
    <button type="submit">Створити звіт</button>
  </Form>
)

Компонент Form має розширені функції, які спрощують написання форм в Inertia, зокрема slot props, form props, події та інше:

# Основні функції

• Відправка з Inertia - працює як класична HTML-форма, але використовує Inertia для обробки відправки за допомогою XHR, уникнувши повного перезавантаження сторінки
• Slot Props - надає стан і допоміжні методи для обробки стану, помилок і утиліт
• Form Props - компонент Form надає props, які доступні в параметрах відвідування Inertia
• Події - компонент Form має події для обробки дій, таких як відправка, скасування, успіх, помилка тощо
• Позначення з крапками - компонент Form дозволяє використовувати позначення з крапками, наприклад, name="user.name", для структурування даних форми, а також використовувати prop transform для зміни даних перед відправкою
• Програмний доступ - ви можете програмно використовувати методи форм через ref, якщо потрібно викликати дії поза формою

Компонент Form доступний для Vue, React та Svelte, починаючи з версії Inertia v2.1.0 Ви можете переглянути реалізацію за посиланням на Pull Request #2474 в inertiajs/inertia. Величезна подяка Паскалю Балжету та всім, хто брав участь у створенні компонента Form для Inertia

# Дізнайтеся більше

Всі деталі можна знайти на офіційній сторінці документації форми, а також ознайомитися з допоміжними функціями useForm(), які вже надаються Inertia

Крім того, стартовий набір Laravel для React було оновлено для використання компонента Form - ознайомтеся з Pull Request #149, щоб зрозуміти, як перейти від useForm до Form Переход до компонента Form у стартовому наборі Laravel для Vue наразі в процесі, але ще не випущено