Update ru/guide/v10/forms.md

content/ru/guide/v10/forms.md

@@ -17,21 +17,55 @@ description: 'Как создавать потрясающие формы в Pre
 
 ## Контролируемые и неконтролируемые компоненты
 
-Говоря об элементах управления формы, часто можно встретить слова «контролируемый компонент» и «неконтролируемый компонент». Описание относится к тому, как обрабатывается поток данных. DOM имеет двунаправленный поток данных, поскольку каждый элемент управления формой будет сам управлять вводом данных пользователем. Простой текстовый ввод всегда будет обновлять свое значение, когда пользователь введет в него текст.
+Говоря об элементах управления формы, часто можно встретить слова «контролируемый компонент» и «неконтролируемый компонент». Описание относится к тому, как обрабатывается поток данных.
 
-Фреймворк типа Preact, напротив, имеет однонаправленный поток данных. Компонент управляет там не самим значением, а чем-то другим, расположенным выше в дереве компонентов.
+DOM имеет двунаправленный поток данных, поскольку каждый элемент управления формой будет сам управлять вводом данных пользователем. Простой текстовый ввод всегда будет обновлять свое значение, когда пользователь введет в него текст. Напротив, такая среда, как Preact, обычно имеет однонаправленный поток данных; компонент там управляет не самим значением, а чем-то другим, расположенным выше в дереве компонентов.
+
+Как правило, вам следует стараться использовать _неконтролируемые_ компоненты, когда это возможно, DOM полностью способен обрабатывать состояние `<input>`:
 
 ```jsx
 // Неконтролируемый, так как Preact не устанавливает значение
 <input onInput={myEventHandler} />;
-
-// Контролируемый, так как Preact теперь управляет значением входа
-<input value={someValue} onInput={myEventHandler} />;
 ```
 
-Как правило, следует стараться всегда использовать _контролируемые_ компоненты. Однако при создании автономных компонентов или обёртке сторонних библиотек пользовательского интерфейса может оказаться полезным просто использовать свой компонент в качестве точки монтирования для функциональности, не связанной с Preact. В этих случаях «неконтролируемые» компоненты прекрасно справляются с поставленной задачей.
+Однако бывают ситуации, когда вам может потребоваться более жёсткий контроль над входным значением, и в этом случае можно использовать _контролируемые_ компоненты.
+
+Чтобы использовать контролируемые компоненты в Preact, вам нужно будет использовать [`refs`](/guide/v10/refs), чтобы преодолеть естественный разрыв между состоянием DOM и состоянием VDOM/Preact. Вот пример того, как вы можете использовать управляемый компонент для ограничения количества символов в поле ввода:
+
+```jsx
+// --repl
+import { render } from "preact";
+import { useState, useRef } from "preact/hooks";
+// --repl-before
+const Input = () => {
+  const [value, setValue] = useState('')
+  const inputRef = useRef()
+
+  const onInput = (e) => {
+    if (e.currentTarget.value.length <= 3) {
+      setValue(e.currentTarget.value)
+    } else {
+      const start = inputRef.current.selectionStart
+      const end = inputRef.current.selectionEnd
+      const diffLength = Math.abs(e.currentTarget.value.length - value.length)
+      inputRef.current.value = value
+      // Восстанавливаем выделение
+      inputRef.current.setSelectionRange(start - diffLength, end - diffLength)
+    }
+  }
+
+  return (
+  <>
+    <label>Этот ввод ограничен 3 символами: </label>
+    <input ref={inputRef} value={value} onInput={onInput} />
+  </>
+  );
+}
+// --repl-after
+render(<Input />, document.getElementById("app"));
+```
 
-> Одна загвоздка заключается в том, что при установке значения `undefined` или `null` оно, по сути, станет неуправляемым.
+> Дополнительную информацию об управляемых компонентах в Preact см. в статье [Контролируемые элементы ввода](https://www.jovidecroock.com/blog/control-inputs) Джови Де Крука.
 
 ## Создание простой формы