چطور می‌تونیم فرم رو در React با استفاده از کلید Enter ارسال کنیم؟

سلام! برای اینکه فرم‌ها رو در React با کلید Enter ارسال کنی، می‌تونی از رویداد onSubmit فرم استفاده کنی. کلید Enter به طور پیش‌فرض باعث ارسال فرم می‌شه، اما برای مطمئن شدن از این موضوع، می‌تونی از یک تابع کنترل‌کننده استفاده کنی.

این‌جا یه نمونه کد برایت دارم:

import React, { useState } from 'react';
function MyForm() {
  const [inputValue, setInputValue] = useState('');
  // Handle form submission
  const handleSubmit = (event) => {
   event.preventDefault(); // Prevent default form submission 
  const { keyCode } = event
   if (keyCode == 13) {
     alert('Form submitted with value: ' + inputValue);
     // Do Things Here
   }
 };
  return (
   <form onSubmit={handleSubmit}>
    <input
      type="text"
      value={inputValue}
      onChange={(e) => setInputValue(e.target.value)}
    />
    <button type="submit">Submit</button>
   </form>
 );
}
export default MyForm;

توضیحات:

1. event.preventDefault(): این خط باعث می‌شه که فرم به‌طور پیش‌فرض ارسال نشه. به جای ارسال پیش‌فرض، ما با استفاده از این تابع می‌تونیم کاری رو انجام بدیم که مد نظر داریم.
2. onSubmit={handleSubmit}: اینجا، تابع handleSubmit به رویداد onSubmit فرم متصل شده که وقتی فرم ارسال می‌شه، این تابع اجرا می‌شه.
3. button type="submit": این دکمه باعث ارسال فرم می‌شه، اما کلید Enter هم به‌طور پیش‌فرض باعث ارسال فرم می‌شه چون ما دکمه‌ای برای ارسال فرم داریم.

به‌طور کلی، وقتی فرم رو با Enter ارسال می‌کنی، کد ما به صورت خودکار این رو مدیریت می‌کنه و فرم ارسال می‌شه.