Create 07-forms.ru-RU.md

docs/docs/07-forms.ru-RU.md

@@ -0,0 +1,175 @@
+---
+id: forms-ru-RU
+title: Формы
+permalink: forms-ru-RU.html
+prev: transferring-props-ru-RU.html
+next: working-with-the-browser.html
+---
+
+Компоненты форм, такие как `<input>`, `<textarea>` и `<option>`, отличаются от других встроенных компонентов, потому что они могут быть изменены посредством взаимодействия с пользователем. Эти компоненты предоставляют интерфейсы, позволяющие легче управлять формами в ответ на пользовательские действия.
+
+За информацией о событиях на `<form>` обратитесь к главе [Form Events](/react/docs/events.html#form-events).
+
+## Интерактивные свойства
+
+Компоненты форм поддерживают несколько свойств, которые подвергаются изменениям при взаимодействиях с пользователем:
+
+* `value`, поддерживается компонентами `<input>` и `<textarea>`.
+* `checked`, поддерживается компонентами `<input>` типа `checkbox` или `radio`.
+* `selected`, поддерживается компонентами `<option>`.
+
+В HTML значение `<textarea>` устанавливается с помощью дочерних элементов. В React вместо этого вам следует использовать `value`.
+
+Компоненты форм позволяют следить за изменениями при помощи установки функции обратного вызова в свойство `onChange`. Свойство `onChange` работает одинаково в различных браузерах и вызывается в ответ на действия пользователя, когда:
+
+* `value` компонента `<input>` или `<textarea>` меняется.
+* Состояние `checked` компонента `<input>` меняется.
+* Состояние `selected` элемента `<option>` меняется.
+
+Как и все события DOM, свойство `onChange` поддерживается на всех встроенных компонентах и может использоваться, чтобы слушать всплывающие события изменений.
+
+> Замечание:
+>
+> Для `<input>` и `<textarea>` `onChange` замещает и в общем случае должен использоваться вместо обработчика встроенного в DOM события [`oninput`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/oninput).
+
+## Управляемые компоненты
+
+**Управляемый** `<input>` имеет свойство `value`. При отрисовке управляемого `<input>` будет отражено значение свойства `value`.
+
+```javascript
+  render: function() {
+    return <input type="text" value="Hello!" />;
+  }
+```
+
+Ввод от пользователя не отразится на отрисованном элементе, так как React объявил его значением `Hello!`. Чтобы обновить значение в ответ на ввод от пользователя, вы можете использовать событие `onChange`:
+
+```javascript
+  getInitialState: function() {
+    return {value: 'Hello!'};
+  },
+  handleChange: function(event) {
+    this.setState({value: event.target.value});
+  },
+  render: function() {
+    return (
+      <input
+        type="text"
+        value={this.state.value}
+        onChange={this.handleChange}
+      />
+    );
+  }
+```
+
+В этом примере мы принимаем значение, переданное пользователем, и обновляем свойство `value` компонента `<input>`. С помощью этого шаблона легко реализовывать интерфейсы, которые проверяют или отвечают на пользовательские взаимодействия. Например:
+
+```javascript
+  handleChange: function(event) {
+    this.setState({value: event.target.value.substr(0, 140)});
+  }
+```
+
+Этот метод принимает входные данные от пользователя и усекает значение до первых 140 символов.
+
+**Управляемый** компонент не поддерживает свое собственное внутреннее состояние; такой компонент отрисовывается исключительно
+на основании свойств.
+
+### Потенциальные проблемы с флажками и переключателями
+
+Примите во внимание, что в попытке нормализовать обработку изменений флажков и переключателей React использует событие `click` вместо события `change`. По большей части это приводит к ожидаемому поведению, за исключением вызова `preventDefault` в обработчике `change`. `preventDefault` предотвращает визуальное обновление поля ввода браузером, даже если свойство `checked` переключается на противоположное. Обойти это можно, удалив вызов `preventDefault` или поместив переключение `checked` в `setTimeout`.
+
+## Неуправляемые компоненты
+
+`<input>` без свойства `value` является *неуправляемым* компонентом:
+
+```javascript
+  render: function() {
+    return <input type="text" />;
+  }
+```
+
+Так будет отрисовано поле ввода, изначально имеющее пустое значение. Любой ввод от пользователя будет немедленно отражен в отрисованном элементе. Если вы хотите следить за обновлениями значения, вы можете использовать событие `onChange` так же, как с управляемыми компонентами.
+
+**Неуправляемый** компонент сам поддерживает свое собственное внутреннее состояние.
+
+### Значение по умолчанию
+
+Если вы хотите проинициализировать компонент непустым значением, вы можете передать свойство `defaultValue`. Например:
+
+```javascript
+  render: function() {
+    return <input type="text" defaultValue="Hello!" />;
+  }
+```
+
+Этот пример будет работать подобно примеру с **управляемыми компонентами** выше.
+
+Аналогично, `<input type="checkbox">` и `<input type="radio">` поддерживают `defaultChecked`, а `<select>` поддерживает `defaultValue`.
+
+> Замечание:
+>
+> Свойства `defaultValue` и `defaultChecked` используются только во время начальной отрисовки. Если вам нужно обновить значение при последующей отрисовке, вам необходимо использовать управляемый компонент.
+
+## Продвинутые темы
+
+### Почему управляемые компоненты?
+
+При использовании в React таких компонентов форм, как `<input>`, возникает проблема, которой не существует при написании традиционных форм в HTML. Например, в HTML:
+
+```html
+  <input type="text" name="title" value="Untitled" />
+```
+
+Здесь будет отрисовано поле ввода, *инициализированное* значением `Untitled`. Когда пользователь обновляет поле ввода, *свойство* `value` элемента изменится. Однако, `node.getAttribute('value')` все еще будет возвращать значение, использованное во время инициализации: `Untitled`.
+
+В отличие от HTML, компоненты React должны представлять состояние представления в любой момент времени, а не только во время инициализации. Например, в React:
+
+```javascript
+  render: function() {
+    return <input type="text" name="title" value="Untitled" />;
+  }
+```
+
+Так как этот метод описывает представление в любой момент времени, значение текстового поля *всегда* будет `Untitled`.
+
+### Почему value у Textarea?
+
+В HTML значение `<textarea>` обычно задается с помощью дочерних элементов:
+
+```html
+  <!-- анти-паттерн: НЕ ДЕЛАЙТЕ ТАК! -->
+  <textarea name="description">This is the description.</textarea>
+```
+
+В HTML разработчики таким образом могут легко указывать многострочные значения. Однако, так как React - это JavaScript, у нас нет ограничений, связанных со строками, и мы может использовать `\n` для переводов строк. В мире, где у нас есть `value` и `defaultValue`, роль дочерних элементов двояка. По этой причине вам не следует использовать дочерние элементы при установке значения в `<textarea>`:
+
+
+```javascript
+  <textarea name="description" value="This is a description." />
+```
+
+Если вы все же *решите* использовать дочерние элементы, они будут вести себя как `defaultValue`.
+
+### Почему value у Select?
+
+Выбранный `<option>` у `<select>` в HTML обычно указывается с помощью атрибута `selected` у этого элемента списка. Вместо этого в React для более простого манипулирования компонентами принят следующий формат:
+
+```javascript
+  <select value="B">
+    <option value="A">Apple</option>
+    <option value="B">Banana</option>
+    <option value="C">Cranberry</option>
+  </select>
+```
+
+Чтобы создать неуправляемый компонент, взамен используется `defaultValue`.
+
+> Замечание:
+>
+> Вы можете передать массив в атрибут `value`, таким образом выбирая несколько элементов в теге `select`: `<select multiple={true} value={['B', 'C']}>`.
+
+### Императивные операции
+
+Если вам нужно императивно произвести операцию, вам придется получить [ссылку на DOM-узел](/react/docs/more-about-refs.html#the-ref-callback-attribute).
+Например, если вы хотите императивно отправить форму, одним из способов это сделать было бы прикрепить `ref` к элементу `form` и вручную вызвать `form.submit()`.