Реагировать — динамический слайдер
Я пытаюсь динамически использовать react-rangeslider. В зависимости от размера массива должно отображаться столько ползунков. Проблема в том, что я не могу заставить их ссылаться на разные значения. Прямо сейчас все ползунки ссылаются на одно и то же значение и, следовательно, все обновляются одинаково. Я хотел бы, чтобы каждый слайдер действовал независимо.
Проблема, с которой я столкнулся при попытке решить эту проблему, заключается в том, что ползунок создается в цикле for, индекс (i) достиг конца (компонент визуализируется arr.length раз), и поэтому я не могу использовать это как способ index в массив значений, где каждый индекс связан с каждым ползунком.
//value is set as a state i.e. value: 5
for(var i = 0; i < arr.length; i++){
<Slider
min = {0}
max = {10}
value = {value}
orientation = "horizontal"
onChange = {this.handleOnChange}
/>
}
handleChangeEvent = value => {
this.setState({
value: value
})
};
Ответы 1
Вы можете установить id = {i} в ползунке, а затем получить к нему доступ в функции handleOnChange.
Что-то вроде этого должно работать:
Сохраните каждое значение ползунка в массиве в состоянии. В событии изменения значения ползунка обновите состояние с помощью индекса, переданного от этого ползунка.
this.state = {
sliderValues: []
}
handleOnChange = (id, value) => {
let sliderValues = [...this.state.sliderValues];
let sliderValue = {
...sliderValues[id],
value: value
}
sliderValues[id] = sliderValue;
this.setState({sliderValues});
}
for(var i = 0; i < arr.length; i++) {
<Slider
min = {0}
max = {10}
value = {this.state.sliderValues[i]}
orientation = "horizontal"
onChange = {(e) => this.handleOnChange(i, e.target.value)}/>
}
Я обновил ответ, надеюсь, теперь он вам понятен.
Спасибо за разъяснения. Я также получаю сообщение об ошибке Невозможно прочитать свойство 'id' неопределенного. Не уверен, как прочитать идентификатор в функции обработки. Любые идеи?
Видите ли вы, что «id» включен в HTML вашего слайдера?
Нет, я не вижу этого в элементах при проверке. Любые идеи?
Что ж, тогда есть другой выход, т. е. передача значения в самой функции handle. Смотрите обновленный ответ.
Спасибо! Единственное, ползунок не обновляется со значением. Значение обновляется, но ползунок не
Извини, я виноват. Я пропустил присвоение значения ползунка массиву. Добавлено sliderValues[id] = sliderValue; перед setState.
Извините, что беспокою вас, но это все еще не работает, ага
Сделайте console.info(sliderValues) прямо перед setState внутри функции дескриптора и посмотрите, что там печатается.... это должен быть массив чисел.
это был выход. sliderValues: ,,[объект Объект]
Я подозревал это. Измените код на этот: let sliderValue = { ...sliderValues[id], value } Он должен создавать массив чисел, а не массив объектов.
SliderValues по-прежнему является объектом
H Как мне узнать, у какого слайдера какой идентификатор? В handleOnChange, как мне сделать обновление Slider независимо на основе идентификатора?