Reactjs 在react引导输入组件上输入键事件处理程序

我有一个带有按钮（

buttonAfter

property）的

Input

组件，我设置了一个与按钮关联的

onClick

处理程序，因此用户可以键入一些文本并点击按钮来触发正确的操作

但是，我希望用户能够按

[Enter]

键（keycode 13）来实现与单击按钮相同的效果，只是为了使UI更易于使用

---

我找不到方法，当然我尝试了

onKeydown

为keydown事件注册一个处理程序，但它被忽略了。

我认为这个问题与React本身有关，而不是与React引导有关

有关React event system的一些基本信息，请参见此：

使用onKeyDown时，onKeyPress或onKeyUp React将向处理程序传递具有以下属性的say“target”对象的实例：

布尔altKey
数字字符码
... （所有信息请参见上面的链接）

所以你可以这样做：

import React，{PropTypes}来自'React'；
从“react dom”导入react dom；
从'react bootstrap'导入{Input}；
类TestInput扩展了React.Component{
手动按键（目标）{
if（target.charCode==13）{
警报（'点击回车！！！'）；
} 
}
render（）{
返回(
);
}
}
ReactDOM.render（，document.getElementById（'app'））；

---

我测试了上面的代码，它工作正常。我希望这对您有所帮助。

这个问题也可以与React bootstrap相关。 React bootstrap还有一种在按下按钮、enter键或任何表单元素时处理实例的方法

下面的代码解释了在没有React处理程序参与的情况下按下enterkey时如何处理实例

从“React”导入React；
从“react dom”导入react dom；
从“react bootstrap”导入{FormGroup，FormControl}；
类TestInput扩展组件{
搜索（）{
控制台日志（“按下输入按钮”）；
}
render（）{
返回(
{
如果（event.key==“输入”）{
这是search（）；
}
}}
/>
);
}
}

React引导不再支持输入表单元素。 相反，它引入了以下项目供您使用

FormGroup组件以适当的间距包装表单控件，并支持标签、帮助文本和验证状态

将表单控件包装在InputGroup中，然后用于普通加载项和按钮加载项

FormControl组件使用引导样式呈现表单控件

参考资料：

未捕获的TypeError:无法读取未定义的属性“charCode”

您必须使用：

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

---

在表单中执行此操作的正确方法与在常规JavaScript中相同：

• 不要在按钮上使用onClick，而是使用type=“submit”
• 表单应该用

• 处理程序应防止页面重新加载

  Handler=（event）=>event.preventDefault（）；processForm（）

• 现在，在任何字段上按下按钮并按Enter键都将调用handler

执行此操作的一个功能组件

功能寄存器（事件）{
event.preventDefault（）
distpach（authActionCreator.register（用户名、电子邮件、密码））；
}
返回(
登记
用户名
电子邮件
密码
登记
);

已经建议的解决方案的略为简化的版本是：

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

const TestInput = () => {

   const handleSubmit = () => {
     /* handle form submit here */
   }

  return (
    <Input type="text" onKeyPress={event => event.key === "Enter" && handleSubmit()} />
  );
}

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

从“React”导入React；
从“react dom”导入react dom；
从'react bootstrap'导入{Input}；
常量测试输入=（）=>{
常量handleSubmit=（）=>{
/*在这里处理提交的表格*/
}
返回(
event.key==“Enter”&&handleSubmit（）}/>
);
}
ReactDOM.render（，document.getElementById（'app'））；

---

onKeyPress={event=>event.key==“Enter”&&handleSubmit（）}

将确保在按下Enter键时调用

handleSubmit

。

感谢您提供的链接，我想知道为什么我以前没有找到它！我的错误是使用

onKeydown

而不是

onKeydown

使用charCode是不推荐的，最好使用char而不是charCode我相信

onKeyPress

属性实际上是一个React特性，引导

FormControl

只是传播它自己不使用的道具（其他道具）向下至

输入

控件。因此，在这方面，Bootstrap间接支持

onKeyPress

。2018年10月24日：链接无效此功能内置于表单中，只需使用type=“submit”并使用包装即可

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

const TestInput = () => {

   const handleSubmit = () => {
     /* handle form submit here */
   }

  return (
    <Input type="text" onKeyPress={event => event.key === "Enter" && handleSubmit()} />
  );
}

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