根据范围类型输入中的其他状态值设置最大值（React）答案

【问题标题】：set max based on other state value in input of range type (React)根据范围类型输入中的其他状态值设置最大值（React）
【发布时间】：2025-12-01 11:55:01
【问题描述】：

我有一个输入类型的范围，输入 1 和输入 2 有 2 个状态值。我想让左输入不可移动并且在它碰到右输入时不通过。我如何使用状态值来实现它？我尝试过类似的方法，但没有成功

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

我不知道哪里出了问题，有人帮帮我。

【问题讨论】：

slideOne 和 slideTwo 在哪里调用？
在每个输入标签<input onInput={this.slideOne}>
您的 HTML 代码没有onInput。
我在删除 onInput 事件 bcs 后复制了我的 html 标签，因为它太落后了
请更新您的问题，包括minimal, complete, and reproducible code example，说明您尝试过的内容，并提供有关未按预期工作的详细信息。

标签： javascript html reactjs state

【解决方案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" />

【讨论】：