reactjs - React - 动态滑块

Question

我正在尝试动态使用 react-rangeslider。根据数组的大小，应该渲染许多滑块。问题是，我无法让他们引用不同的值。现在，滑块都引用相同的值，因此都更新相同。我希望每个 Slider 都能独立行动。

我在尝试解决此问题时遇到的问题是，由于 Slider 是在 for 循环中创建的，索引 (i) 已到达末尾（组件被渲染 arr.length 次），因此我不能将其用作索引到值数组中，其中每个索引都与每个滑块相关联。

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

标签： reactjsrangeslider

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