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>
          Name:
          <input type="text" ref={this.input} />
        </label>
        <input type="submit" value="تقديم الاسم" />
      </form>
    );
  }
}