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

У більшості ситуацій, ми рекомендуємо використовувати контрольовані компоненти для реалізації форм. У контрольованому компоненті, дані форми котролюються React-компонентом. Альтернативним підходом є використання неконтрольованих компонентів, де дані форми контрольюються самим DOM.

\n

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

\n

Наприклад, код нижче отримує ім’я з неконтрольованого компонента:

\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

Try it on 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":[]}