Как синхронизовать slider и поля input в React?

Question

[w1kenD]

Добрый день, недавно начал изучать React. Основная суть задачи: нужно синхронизовать все поля между собой так, чтобы они все обновлялись. Столкнулся с проблемой, что если делать ввод в поля Input (начало и конец), то слайдер ломается и не обновляется. А еще в консоли появляется ошибка. Есть идея использовать хук useEffect для обновления слайдера, при введении новых данных в полях input, но ничего не получилось. Помогите пожалуйста советом!



Код: https://codepen.io/nolikdm/pen/BaRPrzL

Answer 1

[Александр]

Для начала изменить функции:

const handleIndicatorChangeOne = (event) => {
  setValue(values => [Number(event.target.value) || '', values[1]]);
};

const handleIndicatorChangeTwo = (event) => {
  setValue(values => [values[0], Number(event.target.value) || '']);
};

Раз Вы храните массив, то и устанавливайте новым значением массив.
Далее - onChange у TextField необходимо поменять на handleIndicatorChangeOne и handleIndicatorChangeTwo.

Comments

[w1kenD]

Александр, стало лучше, теперь ползунки нормально обновляются, но поля input все равно ломают все((( Я так понимаю, это из-за функций handleIndicatorChangeOne(Two), а точнее связано с || ' '.

[Александр]

w1kenD, А что Вы делаете с полями?

[w1kenD]

w1kenD, пофиксил прописав в функциях handleIndicatorChangeOne и handleIndicatorChangeTwo строку -

event.persist();

[w1kenD]

Александр,ошибка возникала при удалении значений, вообще с этими полями только два действия (удаление старых значений и ввод новых

[Александр]

w1kenD, У меня не возникало ошибки при удалении значений. Может в примере не полный код?

[w1kenD]

Александр, да, вынесена только часть, так как там ещё куча лишнего для решения проблемы работы функционала.