الفرق بين المراجعتين ل"React/uncontrolled components"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
ط (تحديث الصفحة، والعنوان، والتصنيفات)
 
(مراجعتان متوسطتان بواسطة مستخدمين اثنين آخرين غير معروضتين)
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE:المكونات غير المضبوطة}}</noinclude>
+
<noinclude>{{DISPLAYTITLE:المكونات غير المضبوطة في React}}</noinclude>
 
نُفضِّل في معظم الحالات استخدام [[React/forms|المُكوّنات المضبوطة]] من أجل حقول الإدخال، ففي المُكوّنات المضبوطة يتعامل مُكوّن React مع بيانات الحقول. البديل لها هو المُكوّنات غير المضبوطة والتي يتعامل فيها DOM مع بيانات الحقول.
 
نُفضِّل في معظم الحالات استخدام [[React/forms|المُكوّنات المضبوطة]] من أجل حقول الإدخال، ففي المُكوّنات المضبوطة يتعامل مُكوّن React مع بيانات الحقول. البديل لها هو المُكوّنات غير المضبوطة والتي يتعامل فيها DOM مع بيانات الحقول.
  
سطر 21: سطر 21:
 
       <form onSubmit={this.handleSubmit}>
 
       <form onSubmit={this.handleSubmit}>
 
         <label>
 
         <label>
           Name:
+
           الاسم:
 
           <input type="text" ref={this.input} />
 
           <input type="text" ref={this.input} />
 
         </label>
 
         </label>
سطر 93: سطر 93:
 
);
 
);
 
</syntaxhighlight>[https://reactjs.org/redirect-to-codepen/uncontrolled-components/input-type-file جرّب المثال على موقع CodePen].
 
</syntaxhighlight>[https://reactjs.org/redirect-to-codepen/uncontrolled-components/input-type-file جرّب المثال على موقع CodePen].
 +
== انظر أيضًا ==
 +
* [[React/jsx in depth|شرح JSX بالتفصيل]]
 +
* [[React/static type checking|التحقق من الأنواع الثابتة]]
 +
* [[React/typechecking with proptypes|التحقق من الأنواع باستخدام PropTypes]]
 +
* [[React/refs and the dom|استخدام المراجع مع DOM]]
 +
* [[React/optimizing performance|تحسين الأداء]]
 +
* [[React/react without es6|React بدون ES6]]
 +
* [[React/react without jsx|React بدون JSX]]
 +
* [[React/reconciliation|المطابقة (Reconciliation)]]
 +
* [[React/context|استخدام السياق (Context) في React]]
 +
* [[React/fragments|استخدام الأجزاء (Fragments) في React]]
 +
* [[React/portals|المداخل (Portals) في React]]
 +
* [[React/error boundaries|حدود الأخطاء]]
 +
* [[React/web components|مكونات الويب]]
 +
* [[React/higher order components|المكونات ذات الترتيب الأعلى]]
 +
* [[React/forwarding refs|تمرير المراجع]]
 +
* [[React/render props|خاصيات التصيير]]
 +
* [[React/integrating with other libraries|تكامل React مع المكتبات الأخرى]]
 +
* [[React/accessibility|سهولة الوصول]]
 +
* [[React/code splitting|تقسيم الشيفرة]]
 +
* [[React/strict mode|الوضع الصارم (Strict Mode)]]
 +
 
== مصادر==
 
== مصادر==
 
*[https://reactjs.org/docs/uncontrolled-components.html صفحة المكونات غير المضبوطة في توثيق React الرسمي].
 
*[https://reactjs.org/docs/uncontrolled-components.html صفحة المكونات غير المضبوطة في توثيق React الرسمي].
 
[[تصنيف:React]]
 
[[تصنيف:React]]
 +
[[تصنيف:React Advanced Guides]]

المراجعة الحالية بتاريخ 13:26، 23 فبراير 2019

نُفضِّل في معظم الحالات استخدام المُكوّنات المضبوطة من أجل حقول الإدخال، ففي المُكوّنات المضبوطة يتعامل مُكوّن React مع بيانات الحقول. البديل لها هو المُكوّنات غير المضبوطة والتي يتعامل فيها DOM مع بيانات الحقول.

لكتابة مُكوّن غير مضبوط بدلًا من كتابة معالج أحداث لكل تحديث للحالة، فبإمكانك استخدام المراجع للحصول على قيم الحقول من DOM.

مثلًا تقبل هذه الشيفرة اسمًا واحدًا في المُكوّن غير المضبوط:

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.input = React.createRef();
  }

  handleSubmit(event) {
    alert('قُدِّم اسم ' + this.input.current.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          الاسم:
          <input type="text" ref={this.input} />
        </label>
        <input type="submit" value="تقديم الاسم" />
      </form>
    );
  }
}

جرّب المثال على موقع CodePen.

لما كان المُكوّن غير المضبوط يحتفظ بمصدر الحقيقة ضمن DOM، فمن الأسهل أحيانًا دمج شيفرة React مع أي شيفرة أخرى عند استخدام المُكوّنات غير المضبوطة. قد يؤدي ذلك أيضًا إلى كتابة شيفرة أقل إن كانت تهمك السرعة. أما في غير ذلك فيجب عادةً استخدام المُكوّنات المضبوطة.

إن كنتَ لا تزال غير متأكد من نوع المُكوّن الذي يجب استخدامه لحالة محددة، فقد تجد هذه المقالة مفيدة.

القيم الافتراضية

في دورة حياة تصيير React تتجاوز قيمة الخاصية value لعناصر الحقول القيمة الموجودة في DOM. ترغب عادة في المُكوّنات غير المضبوطة أن تُحدِّد React القيمة المبدئية، ولكن بنفس الوقت أن تترك التحديثات التالية غير مضبوطة. للتعامل مع هذه الحالة يمكنك تحديد الخاصية defaultValue بدلًا من value:

render() {
  return (
    <form onSubmit={this.handleSubmit}>
      <label>
        Name:
        <input
          defaultValue="Bob"
          type="text"
          ref={this.input} />
      </label>
      <input type="submit" value="تقديم الاسم" />
    </form>
  );
}

يدعم العنصران ‎<input type="checkbox">‎ و ‎<input type="radio">‎ الخاصية defaultChecked. ويدعم العنصران <select> و <textarea> الخاصية defaultValue.

عنصر إدخال الملفات

يُتيح العنصر ‎<input type="file">‎ في HTML للمستخدم اختيار ملف أو أكثر من جهازه لتحميلها والتعامل معها من خلال JavaScript عبر واجهة برمجة الملفات File API:

<input type="file" />

يُعدُّ العنصر ‎<input type="file" />‎ في React دوما مكونًا غير منضبط لأنّ قيمته لا يُمكِن تعيينها إلّا عن طريق المستخدم وليس برمجيًّا. يجب عليك استخدام واجهة برمجة الملفات للتعامل مع الملفات. يُظهِر المثال التالي كيفية إنشاء مرجع إلى عقدة DOM للوصول إلى الملفات من خلال دالة التعامل مع تقديم الحقول (Submit):

class FileInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.fileInput = React.createRef();
  }
  handleSubmit(event) {
    event.preventDefault();
    alert(
      `Selected file - ${
        this.fileInput.current.files[0].name
      }`
    );
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          تحميل الملف:
          <input type="file" ref={this.fileInput} />
        </label>
        <br />
        <button type="submit">تقديم الطلب</button>
      </form>
    );
  }
}

ReactDOM.render(
  <FileInput />,
  document.getElementById('root')
);

جرّب المثال على موقع CodePen.

انظر أيضًا

 مصادر