[英]To call login function Only once after pressing 'enter' key
我正在使用登录功能。 我将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()}
/>
);
}
谁能帮我这个?
通过快速搜索,我认为这可以满足您的需求:
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事件即可。
就像@Ronnie在注释中指出的那样,每次在组件上触发onKeyPress
函数时,您都会添加一个新的事件侦听器,这会导致问题。 由于onKeyPress
事件已经将event
作为参数传递(类似于onClick
事件),因此您可以从那里访问keyCode
。
您可以将enterKeyPress
函数更改为以下内容:
enterKeyPress(e) {
if (e.keyCode === 13) {
console.log('enter key pressed!');
e.preventDefault();
this.loginUser();
}
}
在这种情况下,事件监听器不是必需的。
首先,调整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);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.