Реагировать - Динамический Слайдер - PullRequest
Новая
       6

Реагировать - Динамический Слайдер

0 голосов
/ 05 февраля 2019

Я пытаюсь динамически использовать реактивный слайдер.В зависимости от размера массива, должно быть отображено столько ползунков.Проблема в том, что я не могу заставить их ссылаться на разные значения.Прямо сейчас, ползунки ссылаются на одно и то же значение и, следовательно, все обновляют одно и то же.Я бы хотел, чтобы каждый Слайдер действовал независимо.

Проблема, с которой я столкнулся при попытке решить эту проблему, заключается в том, что ползунок создан в цикле for, индекс (i) достиг конца (компонент отображается раз в длину), и поэтому я не могуиспользуйте это как способ индексации в массив значений, где каждый индекс связан с каждым ползунком. 

//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}
  />
}

  handleChange = value => {
   this.setState({
    value: value
  })
 };

1 Ответ

0 голосов
/ 05 февраля 2019

Вы можете установить 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)}/>
 }
...