فرم‌ها در React – ارسال داده با onSubmit و action در فرم‌های جستجو

مقدمه

فرم‌ها در React مانند HTML عمل می‌کنند، اما با قدرت مدیریت وضعیت و رویدادها. در این مقاله، فرم جستجو را با استفاده از input و button پیاده‌سازی می‌کنیم و سپس آن را به کامپوننت جداگانه تبدیل می‌کنیم. در ادامه، ویژگی action را جایگزین onSubmit می‌کنیم تا فرم به رفتار بومی HTML نزدیک‌تر شود.

ساخت فرم با onSubmit

ابتدا input و button را درون یک فرم قرار می‌دهیم و از onSubmit برای مدیریت ارسال استفاده می‌کنیم:

<form onSubmit={handleSearchSubmit}>
  <InputWithLabel ... />
  <button type="submit">Submit</button>
</form>

در تابع handleSearchSubmit از event.preventDefault() استفاده می‌کنیم تا از رفرش شدن صفحه جلوگیری شود:

const handleSearchSubmit = (event) => {
  setUrl(`${API_ENDPOINT}${searchTerm}`);
  event.preventDefault();
};

استخراج فرم به کامپوننت جداگانه

فرم را به کامپوننت SearchForm تبدیل می‌کنیم تا کد خواناتر و قابل استفاده مجدد شود:

const SearchForm = ({ searchTerm, onSearchInput, onSearchSubmit }) => (
  <form onSubmit={onSearchSubmit}>
    <InputWithLabel ... />
    <button type="submit">Submit</button>
  </form>
);

استفاده از action به‌جای onSubmit

در نسخه‌های جدیدتر React، می‌توان از ویژگی action برای ارسال فرم استفاده کرد. این ویژگی تابعی را اجرا می‌کند که داده‌ها را پردازش می‌کند:

const SearchForm = ({ searchTerm, onSearchInput, searchAction }) => (
  <form action={searchAction}>
    <InputWithLabel ... />
    <button type="submit">Submit</button>
  </form>
);

در این حالت، دیگر نیازی به preventDefault() نیست، زیرا فرم به‌صورت بومی مدیریت می‌شود:

const searchAction = () => {
  setUrl(`${API_ENDPOINT}${searchTerm}`);
};

مزایای استفاده از فرم در React

• افزایش ساختار و خوانایی HTML
• امکان ارسال با کلید Enter
• قابلیت استفاده مجدد با کامپوننت‌های جداگانه
• آمادگی برای نسخه‌های آینده React با استفاده از action

جمع‌بندی

فرم‌ها در React ابزاری قدرتمند برای دریافت و ارسال داده هستند. با استفاده از onSubmit و سپس action، می‌توان فرم‌هایی ساخت که هم خوانا باشند و هم با رفتار بومی HTML سازگار. این ساختار باعث افزایش تجربه کاربری و توسعه‌پذیری اپلیکیشن می‌شود.