如何强制回车键触发“提交”功能，而不需要专注输入

Question

我正在制作一个应用程序react-redux，我想要一个简单的功能，但这开始看起来很难实施。

:)

我希望能够打开我的web应用程序（我的土地我的登录屏幕上），并只需点击进入（浏览器已经救了我的用户名和密码，他们在正确输入填写字段），并有“进入”击键tigger我的登录功能，而不需要我先点击任何地方来集中某些东西。

（在非根组件）

我已经有绑定到回车键正确我的密码输入（最后一个）。

所以按下Enter键，当我有密码领域的重点工作：

handleSubmit() { 
    const { authenticate } = this.props; 
    const { tusername, tpassword } = this.state; 
    const credentials = { 
     username: tusername, 
     password: tpassword, 
    }; 
    authenticate(credentials); 
} 

_handleKeyPress = (e) => { 
    if (e.key === 'Enter') { 
     this.handleSubmit(); 
    } 
}; 

render() { 
     return (
      <div onKeyPress={this._handleKeyPress} > 
       <Card id="signin"> 
        <CardImg top width="100%" src={rubisLogo} alt="Rubis" /> 
        <InputGroup> 
         <Input 
          placeholder="Nom d'utilisateur" 
          value={this.state.tusername} 
          onChange={this.updateUser} 
         /> 
        </InputGroup> 
        <InputGroup> 
         <Input 
          placeholder="Mot de passe" 
          type="password" 
          value={this.state.tpassword} 
          onChange={this.updatePassword} 
          onKeyPress={this._handleKeyPress} 
         /> 
        </InputGroup> 
        <div> 
        <Button 
        id="btn" 
        onClick={this.handleSubmit} 
        to="/home">Login 
        </Button> 
        </div> 
        <ModalPassword class="modal" buttonLabel="Mot de passe oublié ?" /> 
        <ModalAccount class="modal" buttonLabel="Créer un compte" /> 
       </Card> 
      </div>); 
    } 

，你可以看到，我试图把它的股利，但没有奏效。我也不想要一个基于此的解决方案。我希望输入键在这个视图上成为gobal后备。用户不能仅仅因为他在某处点击而放弃这种功能。

Answer 1

使用的tabIndex默认将焦点设置到div，这样的JavaScript事件将触发

render() { 
     return (
      <div onKeyPress={this._handleKeyPress} tabIndex="1" > 
       <Card id="signin"> 
      ..)} 

Answer 2

你有一个表单标签，而不是一个div来包装你的组件，处理onSubmit事件，登录按钮的属性类型，您必须将其设置为submit。

... 
handleSubmit = (e) => { 
    e.preventDefault(); // prevent browser behavior 
    // Handle submit logic 
    ... 
}; 

render() { 
    return (
    <form onSubmit={handleSubmit}> 
     ... 
     <Button 
     id="btn" 
     type="submit" 
     to="/home">Login 
     </Button> 
    </form> 
); 
}