調用登錄功能只需按“ 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(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已經完成了您要添加的事件偵聽器的操作，因此只需將其直接傳遞給keypress事件即可。

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轉換為箭頭函數是將函數范圍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);
}