在 React 中触发按钮的 onClick 按键答案

【问题标题】：Trigger a button's onClick on key press in React在 React 中触发按钮的 onClick 按键
【发布时间】：2017-03-15 16:47:08
【问题描述】：

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

我尝试像这样向页面添加事件侦听器：

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

问题在于，该监听器在组件挂载时被实例化，这意味着道具用户名和密码处于初始状态（即为空）。

由于类似的原因，将事件侦听器添加到 componentWillReceiveProps 不起作用。

基本上使用此解决方案，我不需要从事件侦听器中的函数发送用户名和密码，而是从定义事件侦听器中的函数的 mapDispatchToProps 中的状态获取用户名和密码，但这很丑陋解决方案。

一开始我一直在寻找的是向按钮添加一个类似于 onClick 的侦听器，基本上是这样的：

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

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

【问题讨论】：

标签： reactjs redux react-redux

【解决方案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);
}

【讨论】：

以上答案加上将 this 绑定到这样的函数：this.handleKeyPress = this.handleKeyPress.bind(this);不如在 MDTP 中创建内联函数好，而是一个不错的解决方案。谢谢！接受您的答案，请编辑您的答案并添加绑定。您还需要将第二个参数添加到 removeEventListener btw。
添加了绑定，虽然如果你使用 createClass 就不需要它了:) 乐于助人！

【解决方案2】：

onKeyPress={event => {if (event.key === "Enter") {function_name}}}

【讨论】：