javascript - 用户输入几秒钟后查询搜索 Meteor + React

Question

我正在实现一个搜索组件，我只想在用户输入几秒钟后执行该组件，因此我不会在每个键输入上查询数据库。不确定在哪个 block 中执行 _.debounce 或 setTimeout。

我正在使用react-komposer，它看起来像这样

import { composeWithTracker } from 'react-komposer';
import { Ruuts } from '../../api/ruuts/ruuts.js';
import { RuutsList } from '../components/ruuts-list.js';
import { Loading } from '../components/loading.js';
import { Meteor } from 'meteor/meteor';

const composer = (params, onData) => {
  let search = getParameterByName('s');
  if (search == null) {
    search = "";
  }
  const subscription = Meteor.subscribe('ruuts', search);
  if (subscription.ready()) {
    const ruuts = Ruuts.find({ ownerId: Meteor.userId() }, { sort: { title: 1 } }).fetch();
    onData(null, { ruuts });
  }
};

export default composeWithTracker(composer, Loading)(RuutsList);

function getParameterByName(name, url) {
  if (!url) {
    url = window.location.href;
  }
  name = name.replace(/[\[\]]/g, "\\$&");
  var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
      results = regex.exec(url);
  if (!results) return null;
  if (!results[2]) return '';
  return decodeURIComponent(results[2].replace(/\+/g, " "));
}

这是搜索组件

import React from 'react';
import { FormGroup, FormControl } from 'react-bootstrap';

export const SearchRuuts = React.createClass({
    handleSearch(e) {
        this.props.router.push({
            ...this.props.location,
            query: {s: e.target.value}
        });
    },

    render() {
      return <FormGroup className="search-ruut">
        <FormControl
          type="text"
          ref="searchRuut"
          onKeyUp={this.handleSearch}
          placeholder="Search by Requisition Number or Title"
        />
      </FormGroup>
    }
});

Answer 1

您可以将普通的 onKeyUp 处理程序包装在 _.debounce 中:

onKeyUp={_.debounce(this.handleSearch, 500)}