{"componentChunkName":"component---src-templates-docs-js","path":"/docs/uncontrolled-components.html","result":{"data":{"markdownRemark":{"html":"

В большинстве случаев при работе с формами мы рекомендуем использовать управляемые компоненты. В управляемом компоненте, данные формы обрабатываются React-компонентом. В качестве альтернативы можно использовать неуправляемые компоненты. Они хранят данные формы прямо в DOM.

\n

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

\n

Вот так, к примеру, обработчик неуправляемого компонента может получить имя от элемента input:

\n
class NameForm extends React.Component {\n  constructor(props) {\n    super(props);\n    this.handleSubmit = this.handleSubmit.bind(this);\n    this.input = React.createRef();  }\n\n  handleSubmit(event) {\n    alert('Отправленное имя: ' + this.input.current.value);    event.preventDefault();\n  }\n\n  render() {\n    return (\n      <form onSubmit={this.handleSubmit}>\n        <label>\n          Имя:\n          <input type=\"text\" ref={this.input} />        </label>\n        <input type=\"submit\" value=\"Отправить\" />\n      </form>\n    );\n  }\n}
\n

Посмотреть на CodePen

\n

Неуправляемые компоненты опираются на DOM в качестве источника данных и могут быть удобны при интеграции React с кодом, не связанным с React. Количество кода может уменьшиться, правда, за счёт потери в его чистоте. Поэтому в обычных ситуациях мы рекомендуем использовать управляемые компоненты.

\n

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

\n

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

\n

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

\n
render() {\n  return (\n    <form onSubmit={this.handleSubmit}>\n      <label>\n        Имя:\n        <input\n          defaultValue=\"Боб\"          type=\"text\"\n          ref={this.input} />\n      </label>\n      <input type=\"submit\" value=\"Отправить\" />\n    </form>\n  );\n}
\n

Аналогично, <input type="checkbox"> и <input type="radio"> используют defaultChecked, а <select> и <textarea> — defaultValue.

\n

Тег поля загрузки файла

\n

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

\n
<input type=\"file\" />
\n

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

\n

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

\n

\n 
class FileInput extends React.Component {\n  constructor(props) {\n    super(props);\n    this.handleSubmit = this.handleSubmit.bind(this);\n    this.fileInput = React.createRef();  }\n  handleSubmit(event) {\n    event.preventDefault();\n    alert(\n      `Selected file - ${this.fileInput.current.files[0].name}`    );\n  }\n\n  render() {\n    return (\n      <form onSubmit={this.handleSubmit}>\n        <label>\n          Upload file:\n          <input type=\"file\" ref={this.fileInput} />        </label>\n        <br />\n        <button type=\"submit\">Submit</button>\n      </form>\n    );\n  }\n}\n\nReactDOM.render(\n  <FileInput />,\n  document.getElementById('root')\n);
\n

\n

Посмотреть на CodePen

","frontmatter":{"title":"Неуправляемые компоненты","next":null,"prev":null},"fields":{"path":"content/docs/uncontrolled-components.md","slug":"docs/uncontrolled-components.html"}}},"pageContext":{"slug":"docs/uncontrolled-components.html"}},"staticQueryHashes":[]}