调用登录功能按下“ enter”键后仅一次

Question

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

      />

    );

}

谁能帮我这个？

Answer 1

在这种情况下，事件监听器不是必需的。首先，调整enterKeyPress为不创建事件侦听器。如果尚未在构造函数中绑定该函数，则可以将enterKeyPress转换为箭头函数：enterKeyPress = (e) => {&nbsp; &nbsp; if (e.keyCode === 13) {&nbsp; &nbsp; &nbsp; &nbsp; console.log('enter key pressed!');&nbsp; &nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; this.loginUser();&nbsp; &nbsp; });}转换enterKeyPress为箭头函数是将函数范围限定到组件的一种方法。另一个选择是将函数绑定到构造函数中或render函数中，这在其他地方已有详细记录。如果已经在构造函数中绑定了该函数（此处未包括该函数），则可以忽略该部分。其次，调整您的onKeyPress属性以传递函数，而不是调用它：<Input&nbsp; &nbsp; type="password"&nbsp; &nbsp; placeholder="Password"&nbsp; &nbsp; onChange={e =>&nbsp; &nbsp; &nbsp; &nbsp; this.setState({ password: e.target.value })&nbsp; &nbsp; }&nbsp; &nbsp; onKeyPress={this.enterKeyPress}/>还要指出的是，这里还有另一个通用的JavaScript错误：在事件侦听器中使用匿名回调函数。通过使用匿名函数，您可以多次添加同一函数，因为每次都会生成不同的函数引用。这也意味着您以后将无法删除它，因为您将需要函数引用来删除它。同样，这里不需要事件侦听器，但是如果这样做了，则可能应该在组件范围内定义回调，以便稍后可以将其删除。使用事件侦听器的常见模式如下：handleKeyPress = (e) => {&nbsp; &nbsp; if (e.keyCode === 13) {&nbsp; &nbsp; &nbsp; console.log('enter key pressed!');&nbsp;&nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; &nbsp; this.loginUser();&nbsp; &nbsp; });}&nbsp;componentDidMount() {&nbsp; &nbsp; window.addEventListener("keypress", this.handleKeyPress);}componentWillUnmount() {&nbsp; &nbsp; window.removeEventListener("keypress", this.handleKeyPress);}

Answer 2

在这种情况下，事件监听器不是必需的。首先，调整enterKeyPress为不创建事件侦听器。如果尚未在构造函数中绑定该函数，则可以将enterKeyPress转换为箭头函数：enterKeyPress = (e) => {&nbsp; &nbsp; if (e.keyCode === 13) {&nbsp; &nbsp; &nbsp; &nbsp; console.log('enter key pressed!');&nbsp; &nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; this.loginUser();&nbsp; &nbsp; });}转换enterKeyPress为箭头函数是将函数范围限定到组件的一种方法。另一个选择是将函数绑定到构造函数中或render函数中，这在其他地方已有详细记录。如果已经在构造函数中绑定了该函数（此处未包括该函数），则可以忽略该部分。其次，调整您的onKeyPress属性以传递函数，而不是调用它：<Input&nbsp; &nbsp; type="password"&nbsp; &nbsp; placeholder="Password"&nbsp; &nbsp; onChange={e =>&nbsp; &nbsp; &nbsp; &nbsp; this.setState({ password: e.target.value })&nbsp; &nbsp; }&nbsp; &nbsp; onKeyPress={this.enterKeyPress}/>还要指出的是，这里还有另一个通用的JavaScript错误：在事件侦听器中使用匿名回调函数。通过使用匿名函数，您可以多次添加同一函数，因为每次都会生成不同的函数引用。这也意味着您以后将无法删除它，因为您将需要函数引用来删除它。同样，这里不需要事件侦听器，但是如果这样做了，则可能应该在组件范围内定义回调，以便稍后可以将其删除。使用事件侦听器的常见模式如下：handleKeyPress = (e) => {&nbsp; &nbsp; if (e.keyCode === 13) {&nbsp; &nbsp; &nbsp; console.log('enter key pressed!');&nbsp;&nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; &nbsp; this.loginUser();&nbsp; &nbsp; });}&nbsp;componentDidMount() {&nbsp; &nbsp; window.addEventListener("keypress", this.handleKeyPress);}componentWillUnmount() {&nbsp; &nbsp; window.removeEventListener("keypress", this.handleKeyPress);}

Answer 3

通过快速搜索，我认为这可能会满足您的需求：enterKeyPress(e) {&nbsp; &nbsp; if (e.keyCode === 13) {&nbsp; &nbsp; &nbsp; console.log('enter key pressed!'); // I will receive this msg (N+1) times when there're N characters in the input text area&nbsp;&nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; &nbsp; this.loginUser(); // this is the login function I want to call after press enter key, but just once per press&nbsp; &nbsp; });}render() {&nbsp; &nbsp; return(&nbsp; &nbsp; &nbsp; <Input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;type="password"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;placeholder="Password"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;onChange={e =>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.setState({ password: e.target.value })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;onKeyPress={this.enterKeyPress}&nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; );}onKeyPress 已经完成了您要添加的事件侦听器的操作，因此只需直接将其传递给keypress事件即可。