我想根据用户输入动态生成 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 });
}
最佳答案
最后我通过定义 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);
}
关于javascript - 使用 Material-UI 中的 slider 动态处理 slider ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48921885/