Как в ReactJS автоматически считать и изменять состояние одного поля формы при изменении пользователем состояния другого поля формы?
Создал пользовательскую форму с инпутами. Данная форма имеет следующие поля: Цена, Процент скидки, Цена со скидкой. Нужно чтобы при изменении пользователем поля "Процент скидки" программа автоматически считала значение "Цена со скидкой", и соответственно при изменении поля "Цена со скидкой" под нее должно высчитываться поле "Процент скидки". Вот реализация в CodeSandbox, которую я написал для этого дела. Но возникла проблема: подсчет поля производится только по старым данным этих полей. То есть, если скажем "Цена: 1000", "Процент скидки: 20" и мы пытается увеличить скидку на один пункт, то для скидки уже в "21", а не в "20" поле "Цена со скидкой" останется на значении "200", хотя должно быть уже "210". Если увеличим скидку до 22, то значение в поле с Ценой со скидкой станет "210", а должна быть уже "220". То есть вычисление идет не в ногу с изменением данных, оно запаздывает.
Я тогда решил, что виновата синхронность выполнения операций. И тогда я познакомился с промисами и написал следующий код. Но в таком случае, если теперь начать изменять поле Процент скидки, то само это поле меняться не будет. Хотя при попытке изменения значения в поле Процент скидки, будет вычисляться поле Цена со скидкой. В общем с этой идеей тоже не вышло. Прошу помощи в решении.
Ответы (1 шт):
function calcPriceDiscount(e) {
setDiscountValue(e.target.value);
setPriceDiscount((priceValue * e.target.value) / 100);
}
function calcDiscountValue(e) {
setPriceDiscount(e.target.value);
setDiscountValue((e.target.value * 100) / priceValue);
}