Неуправляемые компоненты

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

Чтобы написать неуправляемый компонент, вместо написания обработчика событий для каждого обновления состояния, вы можете использовать ref для получения значений формы из DOM.

Например, этот код принимает одно имя в неуправляемом компоненте:

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

  handleSubmit(event) {
    alert('A name was submitted: ' + 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="Submit" />
      </form>
    );
  }
}

Попробовать на CodePen

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

Если всё ещё не ясно, какой тип компонента следует использовать в конкретной ситуации, вам может быть полезна эта статья о управляемых и неуправляемых входных данных.

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

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

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

Аналогично, <input type="checkbox"> и <input type="radio"> поддерживают defaultChecked, а <select> и <textarea> поддерживают defaultValue.

Тег ввода файла

В HTML <input type="file"> позволяет пользователю выбрать один или несколько файлов из хранилища устройства для загрузки на сервер или обработки JavaScript с помощью File API.

<input type="file" />

В React <input type="file" /> всегда является неуправляемым компонентом, потому что его значение может быть установлено только пользователем, а не программно.

Вы должны использовать File API для взаимодействия с файлами. Следующий пример показывает, как создать ссылку на узел DOM для доступа к файлам в обработчике отправки:

class FileInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.fileInput = React.createRef();
  }
  handleSubmit(event) {
    event.preventDefault();
    alert(
      `Selected file - ${this.fileInput.current.files[0].name}`
    );
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Upload file:
          <input type="file" ref={this.fileInput} />
        </label>
        <br />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

ReactDOM.render(
  <FileInput />,
  document.getElementById('root')
);

Попробовать на CodePen