تمرير الدوال إلى المكونات

كيف يمكنني تمرير مُعالِج أحداث (مثل onClick) إلى المكوّن؟

مرِّر مُعالِجات الأحداث والدوال الأخرى كخاصيّات props إلى المكوّنات الأبناء:

<button onClick={this.handleClick}>

إن احتجت إلى الوصول إلى المكوّن الأب في مُعالِج الأحداث فستحتاج إلى ربط الدالة إلى نسخة المكوّن (مشروحة بالتفصيل في القسم التالي).

كيف أربط الدالة إلى نسخة المكوّن؟

هنالك عدة طرق للتأكّد من أنّ الدوال تستطيع الوصول إلى خاصيّات المكوّن مثل this.props و this.state، بناءً على الصياغة وخطوات البناء التي تستخدمها.

الربط في الدالة البانية (ES2015)

class Foo extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log('حدثت نقرة');
  }
  render() {
    return <button onClick={this.handleClick}>انقر هنا</button>;
  }
}

خاصيّات الصنف (اقتراح المرحلة 3)

class Foo extends Component {
  // ملاحظة: هذه الصياغة تجريبية وليست معيارية بعد
  handleClick = () => {
    console.log('حدثت نقرة');
  }
  render() {
    return <button onClick={this.handleClick}>انقر هنا</button>;
  }
}

الربط في تابع التصيير render

class Foo extends Component {
  handleClick() {
    console.log('حدثت نقرة');
  }
  render() {
    return <button onClick={this.handleClick.bind(this)}>انقر هنا</button>;
  }
}

ملاحظة: يُؤدّي استخدام Function.prototype.bind في التابع render إلى إنشاء دالة جديدة في كل مرّة يُصيَّر فيها المكوّن، ممّا قد يؤثر على الأداء (للمزيد تابع في الأسفل).

استخدام الدوال السهميّة في تابع التصيير render

class Foo extends Component {
  handleClick() {
    console.log('حدثت نقرة');
  }
  render() {
    return <button onClick={() => this.handleClick()}>انقر هنا</button>;
  }
}

ملاحظة: يُؤدّي استخدام الدوال السهميّة في التابع render إلى إنشاء دالة جديدة في كل مرّة يُصيَّر فيها المكوّن، ممّا قد يؤثر على الأداء (للمزيد تابع في الأسفل).

هل من الجيّد استخدام الدوال السهميّة في توابع التصيير؟

بشكلٍ عام نعم، لا مشكلة في ذلك، وهي عادةً الطريقة الأسهل لتمرير المُعامِلات إلى دوال ردود النداء.

إن كانت لديك مشاكل في الأداء، فحاول تحسينه عن طريق الطرق المشروحة في توثيق React.

لماذا من الضروري إجراء الربط أساسًا؟

في JavaScript لا تكون الشيفرتان التاليتان متساويتين: