按 'enter' 键后仅调用一次登录功能

Question

我正在开发一个登录功能。我将 enterKey 函数放在输入中，目的是在用户按下回车键时调用登录函数。如果输入区域中没有任何内容，它工作正常，但是，我发现如果输入文本区域中有一些字符，该函数将被调用多次并给出多条错误消息。例如，如果我在输入中有 N 个字符，我将在按下回车键后收到 (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()}
      />
    );
}

谁能帮我解决这个问题？

Answer 1

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

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}
      />
    );
}

onKeyPress 已经做了您要添加的事件侦听器所做的事情，因此只需将按键事件直接传递给它即可。

Answer 2

就像@Ronnie 在评论中指出的那样，每次在组件上触发 onKeyPress 函数时，您都会添加一个新的事件侦听器，这会导致出现问题。由于 onKeyPress 事件已经将 event 作为参数传递（类似于 onClick 事件），您可以从那里访问 keyCode。

您可以将 enterKeyPress 函数更改为以下内容：

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

Answer 3

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

首先，调整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}
/>

还值得注意的是这里还有另一个常见的 JavaScript 错误：在事件侦听器中使用匿名回调函数。通过使用匿名函数，您可以多次添加相同的函数，因为每次都会生成不同的函数引用。这也意味着您以后将无法删除它，因为您需要函数引用才能这样做。

同样，您在这里不需要事件侦听器，但如果您需要，您可能应该在组件范围内定义回调，以便您可以在稍后一点。使用事件侦听器的常见模式如下：

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

componentDidMount() {
    window.addEventListener("keypress", this.handleKeyPress);
}

componentWillUnmount() {
    window.removeEventListener("keypress", this.handleKeyPress);
}

按 'enter' 键后仅调用一次登录功能

To call login function Only once after pressing 'enter' key

javascript

reactjs

keypress

onkeypress