javascript - 根据范围类型输入中的其他状态值设置最大值( react )

Question

我有一个范围输入类型，具有 2 个状态值 input1 和 input2。我想让左边的输入不动，当它碰到右边的输入时不通过。我如何使用状态值来实现它？我试过类似的方法，但没有用

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(因为我没有您的样式)，但有一个建议的解决方案。

• 使用钳制函数将第一张幻灯片的rateMinValue状态钳制在0和this.state.rateMaxValue之间，并将第二张幻灯片钳制rateMaxValue 状态介于 this.state.rateMinValue 和 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" />