I want to transition the page when I enter the react-router.

I am using a react-router.So, I have a question. I would like to take the same action (page transition) as when I click Link when I press the Enter key while focusing on TextField in DOM below. Is API provided?

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

javascript reactjs

2022-09-30 17:51

1 Answers

There is no particular KeyDown detection mechanism in the react-router, so I think it would be better to use HistoryAPI to transition pages in the onKeyDown event.

handler examples:

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

Textfield examples:

<TextField
    floatingLabelText="huga"
    value = {this.state.huga}
    onChange={this.onLangChanged}
    onKeyDown = {this.handleKeyDown}
/>

2022-09-30 17:51

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656