首頁猿問調用登錄功能按下“...

調用登錄功能按下“ enter”鍵后僅一次

JavaScript

慕容森 2021-04-09 14:15:26

我正在使用登錄功能。我將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()} /> );}誰能幫我這個？

查看完整描述

3 回答

隔江千里

TA貢獻1906條經驗獲得超10個贊

在這種情況下，事件監聽器不是必需的。

首先，調整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);

}

反對回復 2021-04-29

夢里花落0921

TA貢獻1772條經驗獲得超6個贊

在這種情況下，事件監聽器不是必需的。

首先，調整enterKeyPress為不創建事件偵聽器。如果尚未在構造函數中綁定該函數，則可以將enterKeyPress轉換為箭頭函數：

enterKeyPress = (e) => {

if (e.keyCode === 13) {

console.log('enter key pressed!');

e.preventDefault();

this.loginUser();

});

}

其次，調整您的onKeyPress屬性以傳遞函數，而不是調用它：

<Input

type="password"

placeholder="Password"

onChange={e =>

this.setState({ password: e.target.value })

}

onKeyPress={this.enterKeyPress}

同樣，這里不需要事件偵聽器，但是如果這樣做了，則可能應該在組件范圍內定義回調，以便稍后可以將其刪除。使用事件偵聽器的常見模式如下：

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

}

反對回復 2021-04-29

揚帆大魚

TA貢獻1799條經驗獲得超9個贊

通過快速搜索，我認為這可能會滿足您的需求：

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事件即可。

反對回復 2021-04-29

3 回答
0 關注
232 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

調用登錄功能按下“ enter”鍵后僅一次

調用登錄功能按下“ enter”鍵后僅一次

3 回答

添加回答