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

前端之家收集整理的这篇文章主要介绍了reactjs – 在反应引导输入组件上输入键事件处理程序前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个带有按钮(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
…(全部见上面的链接)

所以你可以这样做:

  1. import React,{ PropTypes } from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Input } from 'react-bootstrap';
  4.  
  5. class TestInput extends React.Component {
  6.  
  7. handleKeyPress(target) {
  8. if(target.charCode==13){
  9. alert('Enter clicked!!!');
  10. }
  11.  
  12. }
  13.  
  14. render() {
  15. return (
  16. <Input type="text" onKeyPress={this.handleKeyPress} />
  17. );
  18. }
  19. }
  20.  
  21. ReactDOM.render(<TestInput />,document.getElementById('app'));

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

再见

猜你在找的React相关文章