Нужно добавить в форму кнопку "Рассчитать" по клику на эту кнопку мы будем проводить расчет того что пользователь навводил в полях
Как получать данные из форм в реакте:
Для простоты предлагаю пока что блок "Продолжительность смены" закомментить.
Управлять формами можно двумя способами, при помощи useRef или при помощи useState. useRef - это "неконтролируемая" форма, useState - это "конролируемая", можешь если хочешь подробнее потом погуглить сам.
Мне кажется форму лучше сделать "контролируемой", так мы заодно с типами больше поучимся работать. Что нужно сделать:
1) Завести интерфейс с всеми полями в форме (https://metanit.com/web/typescript/3.3.php)
2) Записать в константу дефолтное состояние формы (когда все поля пустые)
3) Создать useState для формы. Дефолтное значение - это константа из п.2
4) Добавить для input'oв: <input onChange={(e) => setState(prevState => { return {...prevState, sum: e.target.value}})} name='sum' value={сюдаЗаписываемЗначение из state} className={styles.text} placeholder='Сумма за час в ₽' />. Это примерный набросок, name у каждого поля должно быть уникальным, в целом по name можно называть и поля в state
5) По клику на кнопку "Рассчитать" нужно выводить в консоль текущий state формы
Про форму
Нужно добавить в форму кнопку "Рассчитать" по клику на эту кнопку мы будем проводить расчет того что пользователь навводил в полях
Как получать данные из форм в реакте:
Для простоты предлагаю пока что блок "Продолжительность смены" закомментить.
Управлять формами можно двумя способами, при помощи useRef или при помощи useState. useRef - это "неконтролируемая" форма, useState - это "конролируемая", можешь если хочешь подробнее потом погуглить сам.
Мне кажется форму лучше сделать "контролируемой", так мы заодно с типами больше поучимся работать. Что нужно сделать:
1) Завести интерфейс с всеми полями в форме (https://metanit.com/web/typescript/3.3.php) 2) Записать в константу дефолтное состояние формы (когда все поля пустые) 3) Создать useState для формы. Дефолтное значение - это константа из п.2 4) Добавить для input'oв:
<input onChange={(e) => setState(prevState => { return {...prevState, sum: e.target.value}})} name='sum' value={сюдаЗаписываемЗначение из state} className={styles.text} placeholder='Сумма за час в ₽' />. Это примерный набросок, name у каждого поля должно быть уникальным, в целом по name можно называть и поля в state 5) По клику на кнопку "Рассчитать" нужно выводить в консоль текущий state формы