lwF4: добавил про controlled inputs

This commit is contained in:
2025-04-16 09:10:49 +04:00
parent 0c0438afdf
commit 09f2dbad7d

View File

@@ -17,8 +17,6 @@
## Проверка формы ввода
> TODO: описать, на что стоит обратить внимание.
При использовании Consta Design, убедитесь, что все текстовые поля записывают значение во внутреннее состояние формы.
Если используете собственные обёртки, пропсы `value` и `onChange` "перекидывать" из компонентов Consta Design далее.
@@ -84,6 +82,25 @@ export const TextField = (props: TextFieldProps) => (
);
```
Если же вы используете обычные элементы `input`, `textarea` и т.п., тогда надо использовать их в controlled-режиме (подробнее о режимах полей ввода [можете почитать в документации](https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable)).
Например, так:
```jsx
<input
onChange={(e) => setNameValue(e.target.value)}
value={nameValue}
type="text"
placeholder="Как Вас зовут?"
/>
<textarea
value={textValue}
onChange={(e) => setTextValue(e.target.value)}
placeholder="Напишите, что Вы думаете о нас..."
></textarea>
```
Только обратите внимание, что необходимо изменить тип в переменных состояния, отвечающих за значения данных на форме, т.к. `string | null` уже не подходит.
## Установка сервера json-server
Создайте каталог рядом с react-приложением.