Javascript 使用React按enter键时单击链接

我已经搜索了一段时间，所以这不应该是一个重复。但是，我试图在按下enter键时触发链接单击

这就是我正在处理的问题：

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>

this.onChange（e）}
className=“搜索框”
占位符=“搜索”
aria label=“搜索”
aria descripeby=“basic-addon2”
onKeyPress={this.handleKeyPress}
/>

使用React Instant Search，我希望在单击enter时提交输入“值”。目前，我只能在实际单击时提交值：

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

我可以找到火的链接。但是，当我也按enter键时，如何获得与链接单击相同的功能？关于如何通过按键链接到搜索值的任何建议？

根据他们对动态路由的建议。到，您应该能够导入

导航

import { navigate } from "@reach/router"


选项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}`;
  }
}

根据他们推荐的动态路由。到，您应该能够导入
导航

import { navigate } from "@reach/router"


选项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}`;
  }
}

如果您已经
react router dom
，则可以使用以下方法：

import { withRouter } from 'react-router-dom'
class *ClassName* extends React.Component {
  ..
  handleKeyPress(target, value) {
    const { history } = this.props;
    if(target.charCode==13){
      history.push(`/search?q=${value}`);
    }
  }
  ..
  render() {
    return (
      ..
      <SearchBox
        value={value}
        ..
        onKeyPress={e => this.handleKeyPress(e, value)}
      />
    )
  }
  ..
}

export default withRouter(*ClassName*);


从“react router dom”导入{withRouter}
类*ClassName*扩展了React.Component{
..
handleKeyPress（目标、值）{
const{history}=this.props；
if（target.charCode==13）{
push（`/search？q=${value}`）；
}
}
..
render（）{
返回(
..
this.handleKeyPress（e，value）}
/>
)
}
..
}
使用路由器（*ClassName*）导出默认值；

重要的是，您可以使用路由器（…）
导出从道具中获取
历史记录
 如果您已经
react router dom
您可以使用以下方法：

import { withRouter } from 'react-router-dom'
class *ClassName* extends React.Component {
  ..
  handleKeyPress(target, value) {
    const { history } = this.props;
    if(target.charCode==13){
      history.push(`/search?q=${value}`);
    }
  }
  ..
  render() {
    return (
      ..
      <SearchBox
        value={value}
        ..
        onKeyPress={e => this.handleKeyPress(e, value)}
      />
    )
  }
  ..
}

export default withRouter(*ClassName*);


从“react router dom”导入{withRouter}
类*ClassName*扩展了React.Component{
..
handleKeyPress（目标、值）{
const{history}=this.props；
if（target.charCode==13）{
push（`/search？q=${value}`）；
}
}
..
render（）{
返回(
..
this.handleKeyPress（e，value）}
/>
)
}
..
}
使用路由器（*ClassName*）导出默认值；

重要的是，您可以使用路由器（…）
导出从道具中获取
历史记录
 你在构造器中“绑定”了handleKeyPress吗？我是新来反应的。。你是说像这样的东西吗
this.handleKeyPress=this.handleKeyPress.bind（this）在我的构造器道具中？你在使用React路由器吗？@brooksrelyt yes^。或者，如果您不想“绑定”，您可以将handleKeyPress编写为箭头函数：handleKeyPress=（target）=>{…等..}我正在使用react static您是否在构造函数中“绑定”handleKeyPress？我是react的新手。。你是说像这样的东西吗
this.handleKeyPress=this.handleKeyPress.bind（this）在我的构造器道具中？你在使用React路由器吗？@brooksrelyt yes^。或者，如果您不想“绑定”，您可以将handleKeyPress编写为箭头函数：handleKeyPress=（target）=>{…等..}我使用的是react staticOption 2。我将
${href}/search？q=${value}
更改为
/search？q=${value}
选项2适合我。我将
${href}/search？q=${value}
更改为
/search？q=${value}