[Перевод] Неконтролируемые компоненты в React14.01.2017 17:03

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 (
      
        
          Name:
           this.input = input} />
        
        
      
    );
  }
}

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

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

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

render() {
  return (
    
      
        Name:
         this.input = input} />
      
      
    
  );
}

Кроме того, и поддерживают атрибут defaultChecked, а