عرض مصدر 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>
          Name:
          <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 عبر واجهة برمجة الملفات File API: