ارسال فرم (Forms Submit)

در React وقتی می خواهی ارسال فرم در React را کنترل کنی، دیگر نمی گذاری فرم خودش صفحه را رفرش کند. تو با کد و رویداد onSubmit تصمیم می گیری چه اتفاقی بیفتد.

کنترل ارسال فرم در React با onSubmit

برای مدیریت ارسال فرم در React، روی تگ <form> یک پراپس onSubmit می گذاریم. این پراپس به یک تابع اشاره می کند که هنگام کلیک روی دکمه ارسال یا زدن Enter اجرا می شود.

در مثال زیر هم مقدار ورودی با useState نگه داشته می شود و هم ارسال فرم در React با تابع handleSubmit کنترل می شود.

import { useState } from 'react';
import { createRoot } from 'react-dom/client';

function MyForm() {
  const [name, setName] = useState("");

  function handleChange(e) {
    setName(e.target.value);
  }

  function handleSubmit(e) {
    e.preventDefault();
    alert(name);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Enter your name:
        <input
          type="text"
          value={name}
          onChange={handleChange}
        />
      </label>
      <input type="submit" />
    </form>
  );
}

createRoot(document.getElementById("root")).render(
  <MyForm />
);

مشاهده در ادیتور

اینجا روی فرم از onSubmit استفاده شده است. وقتی فرم ارسال می شود، تابع handleSubmit اجرا می شود، e.preventDefault() جلوی رفرش صفحه را می گیرد و بعد مقدار name با alert نمایش داده می شود.

گام به گام ارسال فرم در React

حالا مرحله به مرحله می بینیم ارسال فرم در React چطور انجام می شود.

1. اول state برای نگه داشتن مقدار ورودی تعریف می کنیم. این state نام کاربر را نگه می دارد.

const [name, setName] = useState("");

مشاهده در ادیتور

2. بعد تابع handleChange را می سازیم تا هر بار کاربر چیزی تایپ می کند، state با مقدار جدید ورودی به روزرسانی شود.

function handleChange(e) {
  setName(e.target.value);
}

مشاهده در ادیتور

3. حالا تابع handleSubmit را می نویسیم. این تابع رویداد ارسال را می گیرد، با e.preventDefault() جلوی رفتار پیش فرض فرم را می گیرد و سپس با alert مقدار state را نشان می دهد.

function handleSubmit(e) {
  e.preventDefault();
  alert(name);
}

مشاهده در ادیتور

4. در JSX فرم، onSubmit را روی فرم می گذاریم تا هنگام ارسال، تابع handleSubmit اجرا شود. همچنین ورودی را به state وصل می کنیم تا همیشه مقدار جدید را داشته باشیم.

<form onSubmit={handleSubmit}>
  <label>
    Enter your name:
    <input
      type="text"
      value={name}
      onChange={handleChange}
    />
  </label>
  <input type="submit" />
</form>

مشاهده در ادیتور

به این شکل، ارسال فرم در React کاملاً زیر کنترل تو است. می توانی بعداً به جای alert داده را برای سرور بفرستی یا پاک سازی فرم را انجام دهی، اما اصل کار همین کنترل onSubmit است.

جمع بندی سریع ارسال فرم (Forms Submit)

• برای ارسال فرم در React از پراپس onSubmit روی فرم استفاده کن.
• تابع handleSubmit رویداد را می گیرد و منطق ارسال را اجرا می کند.
• با e.preventDefault() جلوی رفرش شدن صفحه را می گیری.
• state مثل name مقدار ورودی را قبل از ارسال نگه می دارد.
• برای مرور دوباره، لینک ارسال فرم در React بهترین نقطه شروع است.