Question

我希望在React中实现{{3}}。基本上，每次滑块发生更改时都会更新，而是定期更新。我目前有一个解决方案，可以更新每个更改..

class SliderForm extends React.Component {
  handleInputChange(e) {
    // run ajax request with e.target.value
  }

  render() {
    return (
      <div>
        <input type="range" value={this.props.value_to_update} onChange={this.handleInputChange.bind(this)} />
      </div>
    )
  }
}

非常感谢任何帮助。

Answer 1

您可以尝试使用debouncing处理程序函数，将其限制为在特定时间范围内仅执行一次。

使用underscore的debounce功能，你可以尝试这样的事情：

class SliderForm extends React.Component {
    constructor() {
        this.handleInputChange = _.debounce(this.handleInputChange.bind(this), 1000);
    }

    handleInputChange(e) {
      // run ajax request with e.target.value
    }

    render() {
        return (
            <div>
                <input type="range" value={this.props.value_to_update} onChange={this.handleInputChange} />
            </div>
        );
    }
}

减少Ajax请求ReactJS Slider

1 个答案: