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

Posted 2023-02-19

【中文标题】根据范围类型输入中的其他状态值设置最大值（React）

【英文标题】：set max based on other state value in input of range type (React)

【发布时间】：2022-01-20 20:40:42

【问题描述】：

我有一个输入类型的范围，输入 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，说明您尝试过的内容，并提供有关未按预期工作的详细信息。

【参考方案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" />