如何使API调用滑块停止移动?

Question

我有一个范围滑块。当我移动滑块时，我得到了更新的值。假设滑块范围是1到50，在滑块移动时，我将获得1到50个值，并将进行50个api调用。如何避免这种情况，并在滑块停止移动时进行单个api调用。

我的要求:
当我停止移动滑块时，我想用最后更新的值进行api调用。下面是我的代码:import React， {Component} from ' React '

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>
)
}
}

Answer 1

为此，我将使用react-rangeslider

它有回调onChangeComplete，你可以使用它来实现你想要的。

我认为这是最简单的方法。

下面是你的代码:

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;