0

react-routerを使っています。そこで質問ですが、下記のDOMでTextFieldにフォーカスした状態でエンターキーを押した時に、Linkをクリックした時と同じアクションつまり(ページ遷移)を起こしたいのですがAPIなどは提供されているのでしょうか。

  <div>
    <TextField
      floatingLabelText="huga"
      value={this.state.huga}
      onChange={this.onLangChanged}
    /><br />
    <TextField
      floatingLabelText="hoge"
      value={this.state.hoge}
      onChange={this.onPChanged}
    /><br />
    <Link to={link} onClick={this.onSubmitted}>
      <FlatButton label="Show" primary={true} />
    </Link>
    <CodeAppHistory />
  </div>

1 件の回答 1

1

react-router には KeyDown 検出の機構はとくにないので、onKeyDown イベントの中で HistoryAPIを利用してページ遷移するのがよろしいと思います。

ハンドラの例:

handleKeyDown(e) {
    if (e.keyCode === 13) { // Enter の場合のみ
        console.log("Enter Key!")
        browserHistory.push("/new_path")
    }
}

Textfield の例:

<TextField
    floatingLabelText="huga"
    value={this.state.huga}
    onChange={this.onLangChanged}
    onKeyDown={this.handleKeyDown}
/>
1
  • 回答ありがとうございます。試してみます Commented 2016年6月22日 8:27

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。