javascript - React JS 的输入范围

Question

我正在尝试使用 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>
    );
}
}

我想禁用第二个值低于第一个值并且第一个值大于第二个值。我尝试在 handleChange 函数中执行此操作但没有成功。

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

有什么建议吗？

Answer 1

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

你的方法应该是这样的

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

如果你想让它们相等，就用<=而不是 < .

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

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

    return (
        <div>
            <div className="priceTitle">15</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>
    );
}
}

ReactDOM.render(
  <Price language="World" />,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
</div>

jsfiddle