如何使用React处理去抖动的输入上的onEnter

Question

以下代码有效。问题在于，当用户按下Enter键时，我会重新制作整个查询，但是onchange去抖动字段再次触发新查询。我希望一旦Enter键被触发，就可以避免反跳查询。

  constructor(props) {
    super(props)
    console.log("shouldComponentUpdate")
    this.customValidate = this.customValidate.bind(this)
    this.debounceValidate = this.debounceValidate.bind(this)
    this.newQuery = this.newQuery.bind(this)

  }
  public customValidate = (event) => {
    this.props.setState({ ...this.props.state, query: event.target.value })
    this.debounceValidate(event.target.value)
  }

  public newQuery = (query) => { this.props.init(query) }
  /* tslint:disable:member-ordering */
  public debounceValidate = _debounce(this.newQuery, 1000)
  public render() {
    const { app, setState, state, actions, auth } = this.props
    return (
      <ONNiSectionActions party={true} config={2} app={app} style={{}}>
        <ONNiRegularField
          notitle={true}
          fullWidth={false}
          title="Pesquisar"
          placeholder="Pesquisar"
          style={{ width: 400 }}
          value={state.query}
          InputProps={{
            onKeyPress: (e: any) => {
              if (e.key === "Enter") {
                console.log("foi enter") // should cancel dedebounced new query here somehow
                this.newQuery(e.target.value)
              }
            }
          }}
          onChange={this.customValidate}
        />

去抖动的代码如下

(
    Observable.forkJoin(
      Observable.ajax({
        method: "POST",
        url: apiURL() + "/dash/party/vouchers/size/desktop/" + location.payload.partyId,
        headers: { JWT_TOKEN: auth.userclub.token },
        body: Serialize({ start: 0, query, limit })
      }),
      Observable.ajax({
        method: "POST",
        url: apiURL() + "/dash/party/vouchers/" + location.payload.partyId,
        headers: { JWT_TOKEN: auth.userclub.token },
        body: Serialize({ start: 0, query, limit })
      })
    )
      .take(1)
      .subscribe((results: Array<{ response: any }>) => {
        console.log(results)
        setState({
          ...state,
          query,
          loaded: true,
          selected: [],
          page: 0,
          rowsperpage: limit,
          max: results[0].response,
          items: results[1].response
        })
      })
  )