使用 Material-UI 中的滑块动态处理滑块答案

【问题标题】：Handle Sliders dynamically using slider from Material-UI使用 Material-UI 中的滑块动态处理滑块
【发布时间】：2018-02-22 07:35:49
【问题描述】：

我想根据用户输入动态生成滑块，但不知道如何在更改时保存值。以下是我的实现给出的代码。问题是我无法通过 event.target.value 获得价值 // priceCities 是一个对象数组：

handlePrices(priceCities){

        return   priceCities.map( (cstate, index) => (
             <li key={index}  >{cstate.name}  <Slider key={index} min={3} max={500}  step={1} style={{height: 100}} axis="y" 
            defaultValue={5}  id ={cstate.id} onChange={ this.handleSlider.bind(this,cstate.id )}  value={this.state.values[cstate.id] }   />   <span>{this.state.values[cstate.id]}</span> </li> 
        ));

}


this.state = {
    values: []
}

这里还有onChange()方法：

   handleSlider ( event,i ) {

   // this.state.sliderValue[event.target.id] =  event.target.value;
    //console.log('handlerslider'+event.target.id+' '+event.target.value);
    let values = [...this.state.values];
    values[i] = event.target.value;
    this.setState({ values });
}

【问题讨论】：

标签： javascript reactjs slider

【解决方案1】：

最后我通过定义这样的 onChange 方法找到了解决方案：

 onChange={(event,value) => this.handleSlider(event, value,currState.id )}

以及handleSlider函数的代码：

handleSlider (event, value,id) {
    let values = [...this.state.sliderValue];

    values[id] =  value;
    this.setState({sliderValue: values });
    console.log('handlerslider'+value+' '+id);
}

【讨论】：

【解决方案2】：

2020 用 Hooks 回答

像这样简单的事情会起作用：

 <Slider
   onChange={(_, value) =>
      setState(value)
   }
   step={1}
   min={1}
   max={50}
   value={value}
   valueLabelDisplay="auto"
/>

【讨论】：