Tengo un control deslizante de rango. Cuando muevo el control deslizante, obtengo los valores actualizados. Digamos que si el rango del control deslizante es de 1 a 50, al mover el control deslizante obtendré valores de 1 a 50 y se realizarán 50 llamadas de API. Cómo evitar esto y hacer una sola llamada api cuando el control deslizante deja de moverse.
Mi requisito:
cuando dejo de mover el control deslizante, quiero hacer una llamada api con el último valor actualizado. Debajo de mi código: importe Reaccionar, {Componente} de 'reaccionar'
class SearchFilters extends Component { constructor(props) { super(props) } handleChange(e) { let updatedValue = e.target.value; Console.log('updatedValue', updatedValue) //make api call here } Render(){ Return( <div className='range-input'> <input type='range' id="r0"min='0' max='50' onChange={(value) => this.handleChange(value)} /> </div> ) } }Para ese propósito, usaría react-rangeslider
Tiene devolución de llamada onChangeComplete que puede usar para lograr lo que desea.
Creo que esa es la forma más fácil.
Así es como se vería su código:
import React, { Component } from "react"; import Slider from "react-rangeslider"; import "react-rangeslider/lib/index.css"; class SearchFilters extends Component { constructor(props, context) { super(props, context); this.state = { value: 0 }; } handleChange = value => { this.setState({ value: value }); }; handleChangeComplete = () => { //here you will make your api call console.log("Change event completed"); }; render() { const { value } = this.state; return ( <div> <Slider min={0} max={50} value={value} onChange={this.handleChange} onChangeComplete={this.handleChangeComplete} /> <div className="value">{value}</div> </div> ); } } export default SearchFilters;