我有一个Input带按钮(buttonAfter属性)的组件,我设置了一个onClick与按钮关联的处理程序,因此用户可以键入一些文本,然后按下该按钮以触发正确的操作.
但是,我希望用户能够[Enter]按键(键代码13)以达到与单击按钮相同的效果,只是为了使UI更易于使用.
我找不到办法做到这一点,当然我试图onKeydown为按键事件注册一个处理程序,但它只是被忽略了.
我认为这个问题与React本身有关,而不是react-bootstrap.
看看这个关于React事件系统的一些基础知识:https://facebook.github.io/react/docs/events.html
当您使用onKeyDown时,onKeyPress或onKeyUp React会将具有以下属性的"target"对象实例传递给您的处理程序:
boolean altKey
number 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 (
);
}
}
ReactDOM.render(我测试了上面的代码并且它有效.我希望这对你有所帮助.
这个问题也可能与React-bootstrap有关.当按钮或输入键或任何表单元素被按下时,React-bootstrap也有一种处理实例的方法.
下面的代码解释了如何在没有React Handlers参与的情况下按下enterkey时处理实例.(这使得它很酷)
import React from "react";
import ReactDOM from "react-dom";
import { FormGroup, FormControl } from "react-bootstrap";
class TestInput extends Component {
search() {
console.log("Enter Button Pressed");
}
render() {
return (
{
if (event.key === "Enter") {
this.search();
}
}}
/>
);
}
}
React Bootstrap不再支持Input表单元素.相反,它会为您提供以下项目
FormGroup组件包含具有适当间距的表单控件,以及对标签,帮助文本和验证状态的支持.
将表单控件包装在InputGroup中,然后用于普通加载项和按钮加载项.
FormControl组件使用Bootstrap样式呈现表单控件.
参考文献:
https://react-bootstrap.github.io/components.html#forms https://react-bootstrap.github.io/components.html#forms-input-groups
京公网安备 11010802040832号 | 京ICP备19059560号-6 