Javascript 带有React JS的输入范围

我试图用React JS创建一个包含多个值的输入范围

我有点像：

class price extends React.Component {
constructor(props){
    super(props);

    this.state = {
        minValue: 0,
        maxValue: 20000,
        step: 1000,
        firstValue: null,
        secondValue: null
    };

    this.handleChange = this.handleChange.bind(this);
}

componentWillMount(){
    this.setState({firstValue: this.state.minValue, secondValue: this.state.maxValue});
}

handleChange(name, event){
    //We set the state value depending on input that is clicked
    if(name === "second"){
        let newValue = parseInt(this.state.firstValue) + parseInt(this.state.step);
        //The second value can't be lower than the first value
        if(parseInt(this.state.secondValue) > parseInt(newValue)){
            this.setState({secondValue: event.target.value});
        }


    }else{
        //The first value can't be greater than the second value
        if(parseInt(this.state.firstValue) < parseInt(this.state.secondValue)){
            this.setState({firstValue: event.target.value});
        }

    }
}

render(){
    const language = this.props.language;

    return (
        <div>
            <div className="priceTitle">{language.price}</div>
            <div className="rangeValues">Range : {this.state.firstValue} - {this.state.secondValue}</div>


            <section className="range-slider">

                <input type="range" value={this.state.firstValue} min={this.state.minValue} max={this.state.maxValue} step={this.state.step}  onChange={this.handleChange.bind(this, "first")}/>
                <input type="range" value={this.state.secondValue} min={this.state.minValue} max={this.state.maxValue} step={this.state.step} onChange={this.handleChange.bind(this, "second")}/>

                <div className="minValue">{this.state.minValue}</div>
                <div className="maxValue">{this.state.maxValue}</div>
            </section>
        </div>
    );
}
}

类价格扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
最小值：0，
最大值：20000，
步骤：1000，
firstValue:null，
第二个值：null
};
this.handleChange=this.handleChange.bind（this）；
}
组件willmount（）{
this.setState（{firstValue:this.state.minValue，secondValue:this.state.maxValue}）；
}
handleChange（名称、事件）{
//我们根据单击的输入设置状态值
如果（名称=“秒”）{
让newValue=parseInt（this.state.firstValue）+parseInt（this.state.step）；
//第二个值不能小于第一个值
if（parseInt（this.state.secondValue）>parseInt（newValue））{
this.setState（{secondValue:event.target.value}）；
}
}否则{
//第一个值不能大于第二个值
if（parseInt（this.state.firstValue）

我想禁用第二个值低于第一个值，并且第一个值大于第二个值。我试图在handleChange函数中实现这一点，但没有成功

在我的示例中，第二个值不能更低，但如果第一个值为12000，第二个值为13000，则无法再更新状态。我不能再改变价格了

---

有什么建议吗？

您必须将您的状态值与目标值进行比较

您的方法应该如下所示

handleChange(name, event){
    let value = event.target.value;
    if(name === "second"){
            if(parseInt(this.state.firstValue) < parseInt(value)){
            this.setState({secondValue:value});
        }
    }
    else{
            if(parseInt(value) < parseInt(this.state.secondValue)){
            this.setState({firstValue: value});
        }
    }
}

handleChange（名称、事件）{
让值=event.target.value；
如果（名称=“秒”）{
if（parseInt（this.state.firstValue）

---

如果您想让它们相等，只需使用jsfiddleempty@Niklavr我更新了它，还添加了一个代码片段