خطأ في استدعاء الـ function داخل onClick واستخدام الأقواس في الاستدعاء في React

Issam Bourouail · 12 مايو 2023

عند عمل بعض المشاريع لاحظت تواجد مشاكل و اخطاء عند استعمال استدعاء ال function داخل ال onClick

-ماهو ختلاف عند استدعاء ال function داخل arrow functio ؟

مثال:

اقتباس

onClick={() => changeStatus(todo)

import React from 'react'
import { ImCheckmark } from "react-icons/im";
import { ImCancelCircle } from "react-icons/im";
const Todos = ({ todos, deletTodo, changeStatus }) => {
  return (

    <div>
      {
        todos.map((todo) => {
          return (
            <div key={todo.id} className='d-f todo-count'>
              <div className={`${todo.status && 'line-through'}`} onClick={() => changeStatus(todo)}>{todo.name}</div>
              <button
                className='delete-btn'>
                {todo.status ? <ImCheckmark style={{
                  color: 'yellow',
                  fontSize: "25px"
                }} /> : <ImCancelCircle onClick={() => deletTodo(todo.id)} style={{
                  color: 'red',
                  fontSize: "25px"
                }} />}</button>
            </div>
          )
        })
      }
    </div> )}
export default Todos

1-ماهو ختلاف عند استدعاء ال function داخل onClick بهذه الطريقة ؟

اقتباس

onClick={addTodoTo}

import { React, useState } from 'react'

const TodoForm = ({addtodosHandler}) => {
  const [text, setText] = useState('');
  const addTodoTo = (e) => { 
    e.preventDefault()
    const todo = {
      id: new Date(),
      name: text, 
      status : false
    }
    addtodosHandler(todo)
    setText('')
   }
  return (
    <form onSubmit={addTodoTo}>
      <input onChange={(e) => setText(e.target.value)} className='input-field' type="text" placeholder='add Todo' value={text}/>
      <button onClick={addTodoTo} className='btn all-btn'>Add Note</button>
    </form>
  )
}

export default TodoForm

و هل خطا استعمال كود هكذا

اقتباس

onClick={addTodoTo()}

تم التعديل في 12 مايو 2023 بواسطة Mustafa Suleiman
تعديل عنوان السؤال

Mustafa Suleiman · 12 مايو 2023

عند استدعاء الـ function داخل onClick، هناك اختلاف بين استخدام الـ function العادية واستخدام arrow function.

فعند استخدام الـ function العادية، تستدعى الـ function مباشرةً عند تحميل الصفحة.

مما يعني أن الـ function ستُستدعى وتنفّذ مرة واحدة عند تحميل الصفحة، وليس عند النقر فعليًا على العنصر الذي يحتوي على الـ onClick، وذلك غير مرغوب فيه، لأنه يعني أن الـ function ستنفّذ قبل النقر على الزر أو العنصر المستدعى.

أما عند استخدام arrow function، فإنها تُستدعى فعليًا عند النقر على العنصر المحدد.

في الكود الأول، تم استخدام arrow function لاستدعاء changeStatus داخل onClick، وبالتالي، سيتم استدعاء الـ function فقط عندما يتم النقر فعليًا على العنصر.

وبالنسبة للكود الثاني، فلا يوجد حاجة لاستدعاء addTodoTo في onClick مرتين. يكفي استدعائها مرة واحدة في onSubmit في الـ <form>، حيث ستتم معالجة الحدث عند النقر على زر الإرسال (submit) في النموذج.

بخصوص للاستفسار الأخير، onClick={addTodoTo()} هو استدعاء فوري للـ function عند تحميل الصفحة، وليس عند النقر فعليًا على العنصر.

ويجب استخدامها بالشكل التالي onClick={addTodoTo} دون استدعاء فوري بواسطة الأقواس ().

Issam Bourouail · 12 مايو 2023

بتاريخ 14 دقائق مضت قال Mustafa Suleiman:

عند استدعاء الـ function داخل onClick، هناك اختلاف بين استخدام الـ function العادية واستخدام arrow function.

فعند استخدام الـ function العادية، مثل الاستدعاء في الكود الأول، تستدعى الـ function مباشرةً عند تحميل الصفحة.

مما يعني أن الـ function ستُستدعى وتنفّذ مرة واحدة عند تحميل الصفحة، وليس عند النقر فعليًا على العنصر الذي يحتوي على الـ onClick، وذلك غير مرغوب فيه عادةً، لأنه يعني أن الـ function ستنفّذ قبل النقر على الزر أو العنصر المستدعى.

أما عند استخدام arrow function، فإنها تُستدعى فعليًا عند النقر على العنصر المحدد. في الكود الأول الذي قدمته، تم استخدام arrow function لاستدعاء changeStatus داخل onClick، وبالتالي، سيتم استدعاء الـ function فقط عندما يتم النقر فعليًا على العنصر.

وبالنسبة للكود الثاني، فلا يوجد حاجة لاستدعاء addTodoTo في onClick مرتين. يكفي استدعائها مرة واحدة في onSubmit في الـ <form>، حيث ستتم معالجة الحدث عند النقر على زر الإرسال (submit) في النموذج.

بخصوص للاستفسار الأخير، onClick={addTodoTo()} هو استدعاء فوري للـ function عند تحميل الصفحة، وليس عند النقر فعليًا على العنصر.

ويجب استخدامها بالشكل التالي onClick={addTodoTo} دون استدعاء فوري بواسطة الأقواس ().

شكرا لاكن عندما قلت

اقتباس

فعند استخدام الـ function العادية، مثل الاستدعاء في الكود الأول، تستدعى الـ function مباشرةً عند تحميل الصفحة.

اضن انها arrow function و ليست function عادية

اقتباس

onClick={() => changeStatus(todo)}

Mustafa Suleiman · 12 مايو 2023

نعم صحيح، في الكود الأول، قمت بتمرير arrow function إلى onClick، وليس function عادية، يعني استدعاء الـ changeStatus داخل onClick سيتم فقط عند النقر على العنصر المحدد، وليس عند تحميل الصفحة.

عبدالباسط ابراهيم · 14 مايو 2023

بالإضافة إلى الفرق الذي ذكره مصطفى في التعليق السابق، هناك فروقات أخرى بين استدعاء الدالة داخل onClick باستخدام function و arrow function وهي كالتالي:

استدعاء الدالة باستخدام function:

يمكن استدعاء الدالة داخل العناصر HTML الأخرى مثل button و input وغيرها.
لا يمكن إجراء أي عملية بعد استدعاء الدالة، مثل إيقاف انتشار الحدث، لذلك يجب استخدام preventDefault() لمنع انتشار الحدث.
قد يؤدي إلى فقدان معنى "this" داخل الدالة، والتي يمكن أن تؤدي إلى أخطاء في التطبيق.

استدعاء الدالة باستخدام arrow function:

يمكن استدعاء الدالة داخل العناصر HTML مثل button و input وغيرها.
يمكن إجراء عمليات بعد استدعاء الدالة، مثل إيقاف انتشار الحدث.
لا يؤدي إلى فقدان معنى "this" داخل الدالة، والتي تجعلها تعمل بشكل أفضل داخل الأحداث مثل onClick.

بشكل عام، يجب استخدام ال arrow function في مثل هذه الحالات حيث يتم استدعاء الدالة داخل الأحداث، لأنها توفر نطاقًا محليًا جديدًا لـ "this" وتجعل الأحداث تعمل بشكل أفضل وتجنب أخطاء في التطبيق.

خطأ في استدعاء الـ function داخل onClick واستخدام الأقواس في الاستدعاء في React

السؤال

Issam Bourouail

4 أجوبة على هذا السؤال

Recommended Posts

Mustafa Suleiman

Issam Bourouail

Mustafa Suleiman

عبدالباسط ابراهيم

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية