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

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

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

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

При написании некотролируемого компонента, вместо того, чтобы писать обработчик событий для каждого обновления состояния, вы можете использовать ref ^[2] для получения значений формы из 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.

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

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

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

Автор: vtikunov

Источник ^[6]