React/forms

تعمل عناصر الحقول (forms) بشكلٍ مختلفٍ قليلًا عن بقيّة عناصر DOM الأخرى في React بسبب احتفاظ عناصر الحقول بشكل طبيعي بحالة داخلية خاصّة بها. فمثلًا يقبل هذا الحقل في HTML اسمًا واحدًا:

<form>
  <label>
    الاسم:
    <input type="text" name="name" />
  </label>
  <input type="submit" value="تقديم البيانات" />
</form>

يمتلك هذا الحقل نفس السّلوك الافتراضي لحقول HTML من حيث الانتقال إلى صفحة جديدة عندما يضغط المستخدم على زر تقديم البيانات (Submit)، وإن أردت فقط هذا السّلوك في React فسيعمل بشكل جيّد معك، ولكن في معظم الأحيان من الملائم أكثر أن نمتلك دالة في JavaScript تتعامل مع تقديم البيانات ولديها الوصول إلى البيانات التي أدخلها المستخدم في الحقل. الطريقة القياسيّة لتحقيق هذا الأمر هي باستخدام تقنيّة تدعى المُكوِّنات المضبوطة (controlled components).

المكونات المضبوطة

تُحافِظ عناصر الحقول في HTML مثل <input>، و <textarea>، و <select> على حالتها الخاصّة وتُحدِثها وفقًا لمُدخلات المستخدم. أمّا في React فيُحتفَظ بحالة قابلة للتعديل ضمن خاصيّة الحالة للمُكوِّنات وتُحدَّث فقط عن طريق التابع setState()‎.

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

على سبيل المثال إن أردنا في المثال السّابق أن نعرض الاسم بعد تقديمه فبإمكاننا كتابة الحقل كمُكوِّن مضبوط:

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

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

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

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

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

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

handleChange(event) {
  this.setState({value: event.target.value.toUpperCase()});
}

العنصر textarea

في HTML يُعرَّف نص العنصر <textarea> بشكلٍ مباشر كما يلي:

<textarea>
  مرحبًا، هذا نص ما موجود ضمن العنصر textarea
</textarea>

أمّا في React يستخدم العنصر <textarea> الخاصيّة value بدلًا من ذلك، وبهذه الطريقة يُمكِن كتابة الحقل الذي يستخدم <textarea> بشكلٍ مُشابِه للحقل الذي يستخدم عنصر الإدخال <input>:

class EssayForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 'اكتب من فضلك مقالًا حول العنصر المفضّل لديك في DOM'
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('قُدِّم المقال: ' + this.state.value);
    event.preventDefault();
  }

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

لاحظ أنّنا هيَّأنا this.state.value بقيمة مبدئيّة في الدالة البانية (constructor)، وبذلك نضمن وجود نص ضمن العنصر <textarea> منذ البداية.

العنصر select

في HTML يُنشِئ العنصر <select> قائمة مُنسدِلة، فمثلًا تُنشِئ هذه الشيفرة قائمة مُنسدِلة ببعض أسماء الفاكهة:

<select>
  <option value="Banana">موز</option>
  <option value="apple">تفّاح</option>
  <option selected value="Orange">برتقال</option>
  <option value="mango">مانجو</option>
</select>

لاحظ أنّ الخيار المبدئي هنا هو البرتقال بسبب وجود الخاصيّة selected بجانبه، ولكن في React بدلًا من استخدام الخاصيّة selected نستخدم الخاصيّة value ضمن العنصر <select> وهذا أسهل في المُكوِّنات المضبوطة لأنّك ستحتاج لتعديلها فقط في مكانٍ واحد. على سبيل المثال:

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: 'orange'};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('فاكهتك المفضّلة هي: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          اختر فاكهتك المفضّلة
          <select value={this.state.value} onChange={this.handleChange}>
              <option value="banana">موز</option>
			  <option value="apple">تفّاح</option>
			  <option value="orange">برتقال</option>
			  <option value="mango">مانجو</option>
          </select>
        </label>
        <input type="submit" value="تقديم البيانات" />
      </form>
    );
  }
}

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

وبهذا نجد أنّ العناصر ‎<input type="text"‎>‎ و <textarea> و <select> تعمل بشكلٍ مماثل، فجميعها تقبل الخاصيّة value والتي نستخدمها لتنفيذ المُكوِّن المضبوط.

ملاحظة: بإمكانك تمرير مصفوفة إلى الخاصيّة value حيث يُتيح لك ذلك انتقاء عدّة خيارات في العنصر <select> :

<select multiple={true} value={['B', 'C']}>

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

في HTML يُتيح العنصر ‎<input type="file">‎ للمستخدم أن يختار ملفًّا واحدًا أو أكثر من جهازه لتحميلها إلى الخادم أو التعامل معها عن طريق JavaScript وذلك عبر واجهة برمجة التطبيق الخاصّة بالملفّات:

<input type="file" />

وبما أنّ قيمته هي قابلة للقراءة فقط فهو مُكوِّن غير مضبوط (uncontrolled component) في React، سنناقش هذا المُكوِّن مع المُكوِّنات غير المضبوطة الأخرى في قسمها الخاص.

التعامل مع إدخالات متعددة

عندما تحتاج إلى التعامل مع عناصر input مُتعدِّدة مضبوطة فبإمكانك إضافة الخاصيّة name إلى كل عنصر وتترك لدالة معالجة الأحداث أن تختار ما ستفعله بناءً على قيمة event.target.name، فلنأخذ هذا المثال:

class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isGoing: true,
      numberOfGuests: 2
    };

    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  render() {
    return (
      <form>
        <label>
          الذاهبون:
          <input
            name="isGoing"
            type="checkbox"
            checked={this.state.isGoing}
            onChange={this.handleInputChange} />
        </label>
        <br />
        <label>
          عدد الضيوف:
          <input
            name="numberOfGuests"
            type="number"
            value={this.state.numberOfGuests}
            onChange={this.handleInputChange} />
        </label>
      </form>
    );
  }
}

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