0
128
Vistasestablezca el máximo en función de otro valor de estado en la entrada del tipo de rango (Reaccionar)
Tengo un tipo de entrada de rango con 2 valores de estado de entrada1 y entrada2. Quiero hacer que la entrada izquierda sea inamovible y que no pase cuando llegue a la entrada derecha. ¿Cómo puedo implementar eso usando valores de estado? He intentado algo como esto pero no funcionó
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 SearchFormno se que le pasa que alguien me ayude.
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Copié su código y no pude reproducir la interfaz de usuario ( ya que no tengo sus estilos ), pero tengo una solución sugerida.
- Utilice una función de sujeción para sujetar el estado
rateMinValuedel deslizador uno entre0ythis.state.rateMaxValue, y sujete el estadorateMaxValuedel deslizador dos entrethis.state.rateMinValuey300000. - Use solo
onInputoonChange, pero no ambos.
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" />
·
Juan Pablo Isaza
Denunciar
Responde la pregunta