عرض مصدر React/uncontrolled components

<noinclude>{{DISPLAYTITLE:المكونات غير المضبوطة}}</noinclude>
نُفضِّل في معظم الحالات استخدام [[React/forms|المُكوّنات المضبوطة]] من أجل حقول الإدخال، ففي المُكوّنات المضبوطة يتعامل مُكوّن React مع بيانات الحقول. البديل لها هو المُكوّنات غير المضبوطة والتي يتعامل فيها DOM مع بيانات الحقول.

لكتابة مُكوّن غير مضبوط بدلًا من كتابة معالج أحداث لكل تحديث للحالة، فبإمكانك [[React/refs and the dom|استخدام المراجع]] للحصول على قيم الحقول من DOM.

مثلًا تقبل هذه الشيفرة اسمًا واحدًا في المُكوّن غير المضبوط:<syntaxhighlight lang="javascript">
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>
    );
  }
}
</syntaxhighlight>[https://codepen.io/gaearon/pen/WooRWa?editors=0010 جرّب المثال على موقع CodePen].

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

إن كنتَ لا تزال غير متأكد من نوع المُكوّن الذي يجب استخدامه لحالة محددة، فقد تجد [http://goshakkk.name/controlled-vs-uncontrolled-inputs-react/ هذه المقالة] مفيدة.

== القيم الافتراضية ==
في دورة حياة تصيير React تتجاوز قيمة الخاصية <code>value</code> لعناصر الحقول القيمة الموجودة في DOM. ترغب عادة في المُكوّنات غير المضبوطة أن تُحدِّد React القيمة المبدئية، ولكن بنفس الوقت أن تترك التحديثات التالية غير مضبوطة. للتعامل مع هذه الحالة يمكنك تحديد الخاصية <code>defaultValue</code> بدلًا من <code>value</code>:<syntaxhighlight lang="javascript">
render() {
  return (
    <form onSubmit={this.handleSubmit}>
      <label>
        Name:
        <input
          defaultValue="Bob"
          type="text"
          ref={this.input} />
      </label>
      <input type="submit" value="تقديم الاسم" />
    </form>
  );
}
</syntaxhighlight>يدعم العنصران ‎<code><input type="checkbox"></code>‎ و ‎<code><input type="radio"></code>‎ الخاصية <code>defaultChecked</code>. ويدعم العنصران <code><select></code> و <code><textarea></code> الخاصية <code>defaultValue</code>.

== عنصر إدخال الملفات ==
يُتيح العنصر ‎<code><input type="file"></code>‎ في HTML للمستخدم اختيار ملف أو أكثر من جهازه لتحميلها والتعامل معها من خلال JavaScript عبر [https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications واجهة برمجة الملفات File API]:<syntaxhighlight lang="javascript">
<input type="file" />
</syntaxhighlight>يُعدُّ العنصر ‎<code><input type="file" /></code>‎ في React دوما مكونًا غير منضبط لأنّ قيمته لا يُمكِن تعيينها إلّا عن طريق المستخدم وليس برمجيًّا.

يجب عليك استخدام واجهة برمجة الملفات للتعامل مع الملفات. يُظهِر المثال التالي كيفية إ<nowiki/>[[React/refs and the dom|نشاء مرجع إلى عقدة DOM]] للوصول إلى الملفات من خلال دالة التعامل مع تقديم الحقول (Submit):<syntaxhighlight lang="javascript">
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')
);
</syntaxhighlight>[https://reactjs.org/redirect-to-codepen/uncontrolled-components/input-type-file جرّب المثال على موقع CodePen].
== مصادر==
*[https://reactjs.org/docs/uncontrolled-components.html صفحة المكونات غير المضبوطة في توثيق React الرسمي].
[[تصنيف:React]]