اذهب إلى المحتوى
  • 0

تشغيل أكثر من دالة باستخدام onClick في React؟

Adam Ebrahim

السؤال

في جافاسكريبت العادية يمكنني أن أقوم بالآتي:

<button onclick="function1(); function2();">click me</button>

لكن كيف أقوم بنفس الشيء في React بدون أن أستعمل دوال خارجية (أي دون أن أقوم بعمل دالة تستدعي الدالتين function1 - function2)؟ هل هذا ممكن في React؟

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

ما تطلبه غير ممكن في React ﻷن ما يجب تمريره للـonClick ليس كود جافاسكريبت كـstring وإنما function object.

بالطبع لا يشترط تعريف دالة منفصلة، يمكنك فعل اﻵتي:

<button onClick={() => {function1(); function2();}}>click me</button>

نعم يمكنك تمرير arrow function إلى onClick بسهولة واستدعاء التابعين الذين تريدهما.

هذا ينطبق على كل الخصائص التي تتوقع تابعاً مثل onChange وغيرها من اﻷحداث.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

بما أنك تنوي كتابة شيفرة منطقية كبيرة نوعا ما فيستحسن اخراجها وجمعها في دالة ثم يتم استدعاء الدالة عندما يحدث الحدث onClick.

داءما في react يجب فصل الشيفرة المنطقية عن jsx قدر الامكان 

import React from 'react';

export default function App() {
  const function1 = () => {
    console.log('function2');
  };
  const function2 = () => {
    console.log('function2');
  };
  const handleClick = () => {
    function1();
    function2();
  };
  return (
    <div>
      <button onClick={handleClick}>click me</button>
    </div>
  );
}

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...