reactjs – 在反应引导输入组件上输入键事件处理程序

发布时间：2020-12-15 20:42:29 所属栏目：百科来源：网络整理

导读：我有一个带有按钮(buttonAfter属性)的Input组件,我设置了一个与按钮相关联的onClick处理程序,因此用户可以键入一些文本并粘贴按钮来触发正确的操作. 但是,我希望用户能够按[Enter]键(键码13)实现与点击按钮相同的效果,只是为了使UI更易于使用. 我找不到一个

我有一个带有按钮(buttonAfter属性)的Input组件,我设置了一个与按钮相关联的onClick处理程序,因此用户可以键入一些文本并粘贴按钮来触发正确的操作.

但是,我希望用户能够按[Enter]键(键码13)实现与点击按钮相同的效果,只是为了使UI更易于使用.

我找不到一个方法,当然我尝试onKeydown注册一个关键事件的处理程序,但它只是被忽略.

我认为这个问题与React本身有关,而不是react-bootstrap.

看看这个有关React事件系统的一些基础知识：https://facebook.github.io/react/docs/events.html

当您使用onKeyDown时,onKeyPress或onKeyUp React将传递给您的处理程序一个使用以下属性的“target”对象的实例：

boolean altKey
数字charCode
…(全部见上面的链接)

所以你可以这样做：

import React,{ PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { Input } from 'react-bootstrap';

class TestInput extends React.Component {

handleKeyPress(target) {
    if(target.charCode==13){
            alert('Enter clicked!!!');    
    }

}

render() {
  return (
    <Input type="text" onKeyPress={this.handleKeyPress} />
  );
 }
}

 ReactDOM.render(<TestInput />,document.getElementById('app'));

我测试了上面的代码,它工作.我希望这对你有帮助.

再见

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!