React/uncontrolled components

نُفضِّل في معظم الحالات استخدام المُكوّنات المضبوطة من أجل حقول الإدخال، ففي المُكوّنات المضبوطة يتعامل مُكوّن 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.

 مصادر

• صفحة المكونات غير المضبوطة في توثيق React الرسمي.