Javascript 按'；后只调用一次登录功能；输入'；钥匙

我现在正在开发一个登录功能。我将enterKey函数放在输入中，我的目标是在用户按下enter键时调用login函数。如果在输入区域中没有任何内容，它可以正常工作，但是，我发现如果在输入文本区域中有一些字符，该函数将被调用多次并给出多条错误消息。 例如，如果输入中有N个字符，则在按下enter键后，我将收到（N+1）条错误消息。 这是我的密码：

 enterKeyPress() {
    window.addEventListener("keypress", e => {
      if (e.keyCode === 13) {
        console.log('enter key pressed!'); // I will receive this msg (N+1) times when there're N characters in the input text area 
        e.preventDefault();
        this.loginUser(); // this is the login function I want to call after press enter key, but just once per press
      }
    });
  }
 render() {
    return(
      <Input
         type="password"
         placeholder="Password"
         onChange={e =>
            this.setState({ password: e.target.value })
         }
         onKeyPress={this.enterKeyPress()}
      />
    );
}

enterKeyPress（）{
window.addEventListener（“按键”，e=>{
如果（如keyCode===13）{
console.log（'enter key pressed！'）；//当输入文本区域中有N个字符时，我将收到此消息（N+1）次
e、 预防默认值（）；
this.loginUser（）；//这是我想在按enter键后调用的登录函数，但每次按一次
}
});
}
render（）{
返回(
this.setState（{密码：e.target.value}）
}
onKeyPress={this.enterKeyPress（）}
/>
);
}

---

有人能帮我吗？

通过一些快速的谷歌搜索，我想这可能会满足你的需要：

enterKeyPress(e) {
    if (e.keyCode === 13) {
      console.log('enter key pressed!'); // I will receive this msg (N+1) times when there're N characters in the input text area 
      e.preventDefault();
      this.loginUser(); // this is the login function I want to call after press enter key, but just once per press
    });
}
render() {
    return(
      <Input
         type="password"
         placeholder="Password"
         onChange={e =>
            this.setState({ password: e.target.value })
         }
         onKeyPress={this.enterKeyPress}
      />
    );
}

enterKeyPress（e）{
如果（如keyCode===13）{
console.log（'enter key pressed！'）；//当输入文本区域中有N个字符时，我将收到此消息（N+1）次
e、 预防默认值（）；
this.loginUser（）；//这是我想在按enter键后调用的登录函数，但每次按一次
});
}
render（）{
返回(
this.setState（{密码：e.target.value}）
}
onKeyPress={this.enterKeyPress}
/>
);
}

---

onKeyPress

已经完成了您试图添加的事件侦听器所做的事情，因此只需直接将keypress事件传递给它即可。

通过一些快速的谷歌搜索，我认为这可能会满足您的需要：

enterKeyPress(e) {
    if (e.keyCode === 13) {
      console.log('enter key pressed!'); // I will receive this msg (N+1) times when there're N characters in the input text area 
      e.preventDefault();
      this.loginUser(); // this is the login function I want to call after press enter key, but just once per press
    });
}
render() {
    return(
      <Input
         type="password"
         placeholder="Password"
         onChange={e =>
            this.setState({ password: e.target.value })
         }
         onKeyPress={this.enterKeyPress}
      />
    );
}

enterKeyPress（e）{
如果（如keyCode===13）{
console.log（'enter key pressed！'）；//当输入文本区域中有N个字符时，我将收到此消息（N+1）次
e、 预防默认值（）；
this.loginUser（）；//这是我想在按enter键后调用的登录函数，但每次按一次
});
}
render（）{
返回(
this.setState（{密码：e.target.value}）
}
onKeyPress={this.enterKeyPress}
/>
);
}

---

onKeyPress

已经做了您试图添加的事件侦听器所做的事情，所以直接将keypress事件传递给它。

就像@Ronnie在评论中指出的那样，每次在组件上触发

onKeyPress

函数时，您都会添加一个新的事件侦听器，这会导致问题。由于

onKeyPress

事件已经将

event

作为参数传递（类似于

onClick

事件），因此您可以从那里访问

keyCode

您可以将

enterKeyPress

功能更改为以下内容：

enterKeyPress(e) {
    if (e.keyCode === 13) {
      console.log('enter key pressed!'); 
      e.preventDefault();
      this.loginUser();
    }
  }

---

正如@Ronnie在评论中指出的，每次在组件上触发

onKeyPress

函数时，您都会添加一个新的事件侦听器，这会导致问题。由于

onKeyPress

事件已经将

event

作为参数传递（类似于

onClick

事件），因此您可以从那里访问

keyCode

您可以将

enterKeyPress

功能更改为以下内容：

enterKeyPress(e) {
    if (e.keyCode === 13) {
      console.log('enter key pressed!'); 
      e.preventDefault();
      this.loginUser();
    }
  }

---

在这种情况下不需要事件侦听器

首先，调整

enterKeyPress

以不创建事件侦听器。如果尚未在构造函数中绑定函数，则可以将enterKeyPress转换为箭头函数：

enterKeyPress = (e) => {
    if (e.keyCode === 13) {
        console.log('enter key pressed!');
        e.preventDefault();
        this.loginUser();
    });
}

将

enterKeyPress

转换为箭头功能是将功能范围扩大到组件的一种方法。另一个选项是在构造函数或

render

函数中绑定函数，这在其他地方有很好的说明。如果您已经在构造函数中绑定了函数（这里没有包含），那么您可以忽略该部分

其次，调整onKeyPress道具以传递函数，而不是调用函数：

<Input
    type="password"
    placeholder="Password"
    onChange={e =>
        this.setState({ password: e.target.value })
    }
    onKeyPress={this.enterKeyPress}
/>

---

在这种情况下不需要事件侦听器

首先，调整

enterKeyPress

以不创建事件侦听器。如果尚未在构造函数中绑定函数，则可以将enterKeyPress转换为箭头函数：

enterKeyPress = (e) => {
    if (e.keyCode === 13) {
        console.log('enter key pressed!');
        e.preventDefault();
        this.loginUser();
    });
}

将

enterKeyPress

转换为箭头功能是将功能范围扩大到组件的一种方法。另一个选项是在构造函数或

render

函数中绑定函数，这在其他地方有很好的说明。如果您已经在构造函数中绑定了函数（这里没有包含），那么您可以忽略该部分

其次，调整onKeyPress道具以传递函数，而不是调用函数：

<Input
    type="password"
    placeholder="Password"
    onChange={e =>
        this.setState({ password: e.target.value })
    }
    onKeyPress={this.enterKeyPress}
/>

---

每次按下一个键时，您都会添加一个事件侦听器^谢谢您的回复，我非常感谢。我正在考虑在调用函数后删除事件侦听器。有更好更简单的解决方案吗？每次按下一个键，您都会添加一个事件侦听器^。我正在考虑在调用函数后删除事件侦听器。有更好更简单的解决方案吗？谢谢你的回复，但我已经测试了这个解决方案，它给了我一个错误消息，如“keycodeisundefined”。所以我想我仍然需要事件侦听器。@hikerE是否删除了函数末尾的括号？在你的问题中，你不允许传递事件参数。我有点困惑，你是说分号前的括号吗？但这是addeventlistener的一部分。@hikerE否，在

onKeyPress={this.enterKeyPress}

中。我发现的所有示例都是这样使用它的。不幸的是，如果我去掉括号，它就不会调用enterKeyPress f