2

私はしばらくSOを探していたので、これは重複していません。しかし、エンターキーが押されたときにリンククリックをトリガーしようとしています。

これは私が取り組んでいるものです：

handleKeyPress(target) {
  if(target.charCode==13){
    alert('Enter clicked!!!');    
  }
}

検索入力:

<SearchBox
  type="text"
  value={value}
  onChange={e => this.onChange(e)}
  className="search-box"
  placeholder="Search"
  aria-label="search"
  aria-describedby="basic-addon2"
  onKeyPress={this.handleKeyPress}
/>
<div>
  <Link to={`/search?q=${value}`} className="btn submit-button"><i className="fa fa-search"></i></Link>
</div>

React Instant Search を使用して、入力がクリックされたときに入力「値」を送信したいと考えています。現在、物理的にクリックしたときにのみ値を送信できます。

<div>
  <Link to={`/search?q=${value}`} className="btn submit-button"><i className="fa fa-search"></i></Link>
</div>

発射へのリンクを取得できます。しかし、Enter キーを押したときにリンク クリックと同じ機能を得るにはどうすればよいでしょうか。KeyPress を介して検索値にリンクする方法について何か提案はありますか?

4

2 に答える 2

2

react-statics のドキュメントによると、動的ルーティング用にReach Router をインストールすることを推奨しています。Reach Router を使用してプログラムでナビゲートするには、インポートできる必要がありますnavigate。

import { navigate } from "@reach/router"

...

handleKeyPress(target) {
  // I'm guessing you have value stored in state
  const { value } = this.state;
  if(target.charCode==13){
    navigate(`/search?q=${value}`);
  }
}

オプション 2

正直なところ、おそらくjavascriptでそれを行うことができる場合、それは大変な作業のように思えます.

handleKeyPress(target) {
  // I'm guessing you have value stored in state
  const { value } = this.state;
  if(target.charCode==13){
    const { href } = window.location;
    window.location.href = `${href}/search?q=${value}`;
  }
}
于 2019-02-07T19:05:24.477 に答える