我正在研究登录功能。我把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()}
/>
);
}
谁能帮我这个?
在这种情况下,事件监听器不是必需的。
首先,调整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);
}
从一些快速的谷歌搜索,我认为这可能会做你需要的:
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();
}
}