Для вызова функции входа в систему только один раз после нажатия клавиши «Ввод» - PullRequest
Новая
       43

Для вызова функции входа в систему только один раз после нажатия клавиши «Ввод»

1 голос
/ 13 апреля 2019

Я сейчас работаю над функцией входа в систему.Я вставил свою функцию 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()}
      />
    );
}

Может кто-нибудь помочь мне с этим?

Ответы [ 3 ]

0 голосов
/ 13 апреля 2019

Как @Ronnie указал в комментариях, вы добавляете новый прослушиватель событий каждый раз, когда функция onKeyPress запускается на компоненте, что вызывает проблемы. Поскольку событие onKeyPress уже передает event в качестве аргумента (аналогично событию onClick), вы можете получить доступ к keyCode оттуда.

Вы можете изменить функцию enterKeyPress на следующее: 

enterKeyPress(e) {
    if (e.keyCode === 13) {
      console.log('enter key pressed!'); 
      e.preventDefault();
      this.loginUser();
    }
  }
0 голосов
/ 13 апреля 2019

Слушатели событий в этом случае не нужны.

Прежде всего, настройте 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);
}
0 голосов
/ 13 апреля 2019

Из некоторого быстрого поиска в Google, я думаю, что это может сделать то, что вам нужно: 

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 уже делает то, что делает прослушиватель событий, который вы пытаетесь добавить, поэтому просто передайте ему событие нажатия клавишипрямо вместо.

...