You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
В HTML элементы формы, такие как `<input>`, `<textarea>` и `<select>` обычно сами управляют своим состоянием и обновляют его когда пользователь вводит данные. В React мутабельное состояние обычно содержится в свойстве компонентов `state` и обновляется только через вызов[`setState()`](/docs/react-component.html#setstate)
28
+
В HTML элементы формы, такие как `<input>`, `<textarea>` и `<select>`, обычно сами управляют своим состоянием и обновляют его когда пользователь вводит данные. В React мутабельное состояние обычно содержится в свойстве компонентов `state` и обновляется только через вызов[`setState()`](/docs/react-component.html#setstate)
29
29
30
30
Мы можем скомбинировать оба подхода и сделать состояние React-компонента "единственным источником правды". Тогда React-компонент будет рендерить форму и контролировать её поведение в ответ на пользовательский ввод. Значение элемента формы input в этом случае будет контролировать React, а сам элемент будет называться «контролируемый компонент».
31
31
@@ -66,7 +66,7 @@ class NameForm extends React.Component {
66
66
67
67
[**Посмотреть на CodePen**](https://codepen.io/gaearon/pen/VmmPgp?editors=0010)
68
68
69
-
Мы установили атрибут `value` для поля ввода, и теперь в нём всегда будет отображаться `this.state.value`. Состояние React-компонента стало «источником истины». А, так как каждое нажатие клавиши вызывает `handleChange`, который обновляет состояние React-компонента, значение в поле будет обновляться по мере того как пользователь печатает.
69
+
Мы установили атрибут `value` для поля ввода, и теперь в нём всегда будет отображаться значение `this.state.value`. Состояние React-компонента стало «источником истины». А так как каждое нажатие клавиши вызывает `handleChange`, который обновляет состояние React-компонента, значение в поле будет обновляться по мере того, как пользователь печатает.
70
70
71
71
В контролируемом компоненте с каждой мутацией состояния связана функция-обработчик. Благодаря этому валидация или изменение введённого значения становится простой задачей. Например, если мы хотим, чтобы имя обязательно было набрано заглавными буквами, можно написать такой `handleChange`:
Использование контролируемых компонентов иногда может быть утомительным. Приходится писать обработчик события для каждого варианта изменения ваших данных и проводить всё состояние формы через компонент React. Это может особенно раздражать, если вы переносите существующую кодовую базу в React, или когда работаете над интеграцией React-приложения с другой библиотекой. В такой ситуации могут пригодиться [неконтролируемые компоненты](/docs/uncontrolled-components.html), альтернативная техника реализации ввода данных в форму.
294
+
Использование контролируемых компонентов иногда может быть утомительным. Приходится писать обработчик события для каждого варианта изменения ваших данных и проводить всё состояние формы через компонент React. Это может особенно раздражать, если вы переносите существующую кодовую базу в React, или когда работаете над интеграцией React-приложения с другой библиотекой. В такой ситуации могут пригодиться [неконтролируемые компоненты](/docs/uncontrolled-components.html) — альтернативная техника реализации ввода данных в форму.
0 commit comments