Reactイベントスロットリング効果が失敗する理由と解決策

与える（） {
    戻る （
      <div className="検索バー">
        <input className="search-input" type="text" placeholder="検索するユーザー名を入力してください（英語）" onKeyDown={this.throttle(this.handleKeyDown)}/>
      </div>
    ）
  }

スロットル = (fn) => {
    有効 = true とする
    const コンテキスト = this

    関数()を返す{
      （！有効）の場合、戻り値
      有効 = 偽

      const args = 引数

      fn.apply(コンテキスト、引数)

      タイムアウトを設定する(() => {
        有効 = 真
      }, 1000);
    }
  }

  ハンドルキーダウン = (e) => {
    {値} = e.targetとする
    定数キーコード = e.keyCode

    (キーコード!== 13)の場合、戻り値

    if (!value.trim()) 戻り値
    
    // 検索を送信 this.props.search(value)
  }

スロットル = (fn) => {
    console.log('%c スロットル初期化', '色: 赤');
    有効 = true とする
    const コンテキスト = this

    関数()を返す{
      （！有効）の場合、戻り値
      有効 = 偽

      const args = 引数

      fn.apply(コンテキスト、引数)

      タイムアウトを設定する(() => {
        有効 = 真
      }, 1000);
    }
  }

与える（） {
    戻る （
      <div className="検索バー">
        <input className="search-input" type="text" placeholder="検索するユーザー名を入力してください（英語）" onKeyDown={this.handleKeyDown}/>
      </div>
    ）
  }

handleKeyDown = this.throttle((e) => {
    {値} = e.targetとする
    定数キーコード = e.keyCode

    (キーコード!== 13)の場合、戻り値

    if (!value.trim()) 戻り値
    
    // 検索を送信 this.props.search(value)
  })

与える（） {
    戻る （
      <div className="検索バー">
        <input className="search-input" type="text" placeholder="検索するユーザー名を入力してください（英語）" onKeyDown={this.handleKeyDown}/>
      </div>
    ）
  }

コンストラクタ(props) {
    スーパー(小道具)
    this.handleKeyDown = this.throttle(this.handleSearch)
  }

  ハンドルサーチ = (e) => {
    {値} = e.targetとする
    定数キーコード = e.keyCode

    (キーコード!== 13)の場合、戻り値

    if (!value.trim()) 戻り値
    
    // 検索を送信 this.props.search(value)
  }