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

В большинстве случаев мы рекомендуем использовать контролируемые компоненты для реализации форм. В контролируемом компоненте данные формы обрабатываются компонентом 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>
    );
  }
}

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

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

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

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

Аналогично, <inputtype = "checkbox"> и <inputtype = "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')
);