根据范围类型输入中的其他 state 值设置最大值（反应）

Question

我有一个输入类型的范围，输入1和输入2有2个state值。 我想让左输入不可移动并且在它碰到右输入时不通过。 我如何使用 state 值来实现它？ 我尝试过这样的事情，但没有奏效

import React, { Component } from 'react'

class SearchForm extends Component {
    constructor(props) {
        super(props)

        this.state = {

            rateMinValue: 0,
            rateMaxValue: 300000,
            minGap: 0,
        }
    }

    rateMinHandler = (event) => {
        this.setState(
            {
                rateMinValue: event.target.value
            }
        )
    }
    rateMaxHandler = (event) => {
        this.setState(
            {
                rateMaxValue: event.target.value
            }
        )
    }

    slideOne = (event) => {
        if (this.state.rateMaxValue - this.state.rateMinValue <= this.state.minGap) {
            this.setState({
                rateMinValue: this.state.rateMaxValue
                    - this.state.minGap
            })
        }
    }
    slideTwo = (event) => {
        if (this.state.rateMaxValue - this.state.rateMinValue <= this.state.minGap) {
            this.setState({
                rateMaxValue: this.state.rateMinValue
                    + this.state.minGap
            })
        }
    }

    render() {
        return (
            <div>
                <div className='filter-rate-slider'>
                    <div className='rate-range-values'>
                        {this.state.rateMinValue < this.state.rateMaxValue ? <span>{this.state.rateMinValue}-{this.state.rateMaxValue}</span> : <span>{this.state.rateMaxValue}-{this.state.rateMinValue}</span>}


                    </div>
                    <div className='rate-range-container'>
                        <div className='slider-track'></div>
                        <input onInput={this.slideOne} type='range' min='0' max='300000' step='10000' defaultValue='0' id='slider-1' onChange={this.rateMinHandler}></input>
                        <input onInput={this.slideTwo} type='range' min='0' max='300000' step='10000' defaultValue='300000' id='slider-2' onChange={this.rateMaxHandler}></input>
                    </div>


                </div>

            </div>
        )
    }
}

export default SearchForm

我不知道有什么问题有人帮助我。

Answer 1

我复制了您的代码，但无法重现 UI（因为我没有您的样式），但有一个建议的解决方案。

• Use a clamping function to clamp the slide one rateMinValue state between 0 and this.state.rateMaxValue , and clamp the slide two rateMaxValue state between this.state.rateMinValue and 300000 .
• 仅使用onInput或onChange ，但不能同时使用。

 const clamp = (min, max, val) => Math.max(min, Math.min(val, max)); class SearchForm extends React.Component { state = { rateMinValue: 0, rateMaxValue: 300000, minGap: 0 }; slideOne = (event) => { this.setState((prevState) => ({ rateMinValue: clamp( 0, prevState.rateMaxValue - prevState.minGap, event.target.value ) })); }; slideTwo = (event) => { this.setState((prevState) => ({ rateMaxValue: clamp( prevState.rateMinValue + prevState.minGap, 300000, event.target.value ) })); }; render() { return ( <div> <div className="filter-rate-slider"> <div className="rate-range-values"> {this.state.rateMinValue}-{this.state.rateMaxValue} </div> <div className="rate-range-container"> <div className="slider-track"></div> <input onInput={this.slideOne} type="range" min="0" max="300000" step="10000" value={this.state.rateMinValue} id="slider-1" /> <input onInput={this.slideTwo} type="range" min="0" max="300000" step="10000" value={this.state.rateMaxValue} id="slider-2" /> </div> </div> </div> ); } } const rootElement = document.getElementById("root"); ReactDOM.render( <React.StrictMode> <SearchForm /> </React.StrictMode>, rootElement );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="root" />