Question

所以基本上我有一个没有表单的登录页面，我想在用户按下回车时触发登录按钮的onClick。

我尝试向页面添加一个事件监听器，如下所示：

componentWillMount() {
   const { handleKeyPress, username, password } = this.props;
   document.addEventListener('keydown', (event, username, password) => handleKeyPress(event.key));
}

问题是该组件安装时实例化该侦听器，这意味着props用户名和密码处于初始状态（即为空）。

将事件监听器添加到componentWillReceiveProps并不会出于类似的原因。

基本上使用此解决方案，我不需要从事件侦听器中的函数发送用户名和密码，而是从mapDispatchToProps中的状态获取用户名和密码，其中定义了事件侦听器中的函数，但是＆＃ 39;一个非常丑陋的解决方案。

我在开始时寻找的是为类似于onClick的按钮添加一个监听器，基本上就是这样：

<button
  onEnterKeyPress={() => handleLogin(this.props.username, this.propspassword)}
>
  Log in
</button>

但据我所知，没有办法做到这一点......希望我错了！如果有人有想法，请分享。

Answer 1

constructor() {
   super();
   this.handleKeyPress = this.handleKeyPress.bind(this);
}

componentWillMount() {
   document.addEventListener('keydown', this.handleKeyPress);
}

handleKeyPress(event) {
   if (event.keyCode !== 13) return;

   const {handleLogin, username, password} = this.props;

   handleLogin(username, password);
}

componentWillUnmount() {
   document.removeEventListener('keydown', this.handleKeyPress);
}

Answer 2

onKeyPress = {event => {if（event.key ===“ Enter”）{function_name}}}

在React中触发按钮按下按键

2 个答案: