Неконтролируемые компоненты в React

Продолжение серии переводов раздела "Продвинутые руководства" (Advanced Guides) официальной документации библиотеки React.js.

Неконтролируемые компоненты в React

В большинстве случаев, мы рекомендуем использовать контролируемые компоненты для реализации форм. В контролируемом компоненте, данные формы обрабатываются компонентом React. Есть альтернативный вариант — это неконтролируемые компоненты, в которых данные формы обрабатываются самим DOM.
При написании неконтролируемого компонента, вместо того, чтобы писать обработчик событий для каждого обновления состояния, вы можете использовать ref для получения значений формы из DOM.

Например, следующий код принимает значение Имени из формы в неконтролируемом компоненте:

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.input.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={(input) => this.input = input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

Поскольку в неконтролируемом компоненте хранение актуальных данных происходит в DOM — использование таких компонентов иногда позволяет проще интегрировать (соединять) React и не-React код. Если вас интересует меньший объем кода (и следственно скорость его написания) в ущерб чистоты кода — это вариант. В противном случае, лучше использовать контролируемые компоненты.

Значения по умолчанию

В жизненном цикле отображения (рендеринга) React, атрибут value в элементах формы будет переопределять значение в DOM. В неконтролируемых компонентах, у вас часто будет возникать необходимость в задании начальных значений, при этом оставляя последующие обновления неконтролируемыми. В этом случае, вы можете задать атрибут defaultValue вместо value.

render() {
  return (
    <form onSubmit={this.handleSubmit}>
      <label>
        Name:
        <input
          defaultValue="Bob"
          type="text"
          ref={(input) => this.input = input} />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

Кроме того, <input type="checkbox"> и <input type="radio"> поддерживают атрибут defaultChecked, а <select> поддерживает defaultValue.

Следующая часть:

• Оптимизация производительности в React.

Предыдущие части:

• Ref-атрибуты и DOM в React.
• PropTypes — проверка типов в React.
• JSX — подробности.

Первоисточник: React — Advanced Guides — Uncontrolled Components