Question

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

尝试解决此问题时遇到的问题是，因为在for循环中创建了Slider，索引（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
  })
 };

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

React-动态滑块

1 个答案: