javascript - 使用 Material-UI 中的 slider 动态处理 slider

Question

我想根据用户输入动态生成 slider ，并且不知道如何保存更改时的值。以下是我的实现的代码。问题是我无法通过 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 });
}

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