react nodejsjs 怎样绑定键盘敲击回车事件

来源：蜘蛛抓取(WebSpider) 时间：2018-03-02 18:39 标签： react nodejs
React-Hotkeys v1.0.4 发布，React 版键盘捕捉 JS 库
React-Hotkeys v1.0.4 发布 。这是一个基于&的一个React版本，监听keydown和keyup，定义快捷键，捕获键盘输入和输入的组合键。更新内容：&- 更新依赖hotkeys-js v2.0.5，修复服务端渲染问题。
HotKeys 的详细介绍：
HotKeys 的下载地址：
转载请注明：文章转载自 开源中国社区
本文标题：React-Hotkeys v1.0.4 发布，React 版键盘捕捉 JS 库
本文地址：他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
我在一个组件里绑定了onClick事件，然后在componentDidMount这个生命周期里为body绑定了一个事件，为什么我点击该元素都是先执行body上绑定的事件，再执行我用onClick绑定的事件？我在想是不是react的事件都是在顶层做了事件委托，如果是这样，我想实现事件冒泡是不是做不了了？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
自己来填坑，在某一个React-Event绑定的事件回调函数中打印e.nativeEvent.currentTarget可以发现结果是#document, 也就是说React的事件机制应该是全部绑定在了document上。之前在componentDidMount里面通过document.body.addEventListener绑定了点击事件，因为body其实也是document的下级，所以是先执行body绑定的回调函数。另外即使改成document.addEventListener来绑定点击事件(假设是function1)，在ReactElement中使用e.stopPropagation()是无法阻止function1的调用，要想阻止function1调用，可能只能e.nativeEvent.stopImmediatePropagation();
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)简单按钮点击事件：
&!DOCTYPE html&&html&& &head&& &meta charset="utf-8"&&&& &script src="../build/react.js"&&/script&&&& &script src="../build/react-dom.js"&&/script&&&& &script src="../build/browser.min.js"&&/script&& &/head&& &body&&&& &div id="example"&&/div&&&& &!-- 区别就在于 babel 支持将按照ES6写的代码转成ES5格式的代码，&&& 以便让其能在现代浏览器上正常运行，用jsx， 只能用ES5的语法。 --&&&& &script type="text/babel"&&&& var HelloMessage=React.createClass({&&&&&&& handClick:function(event){&&&&&&&&&&& &!-- 获取真实DOM& ReactDOM.findDOMNode函数 --&&&&&&&&&&&& var tipE=ReactDOM.findDOMNode(this.refs.tip)&&&&&&&&&&& if(tipE.style.display==="none"){&&&&&&&&&&&&&&& tipE.style.display="inline"&&&&&&&&&&& }else{&&&&&&&&&&&&&&& tipE.style.display="none"&&&&&&&&&&& }&&&&&&&&&&& &!-- 将停止事件的传播 --&&&&&&&&&&&& event.stopPropagation()&&&&&&&&&&& &!-- 阻止元素发生默认的行为 --&&&&&&&&&&&& event.preventDefault()&&&&&&& },&&&&&&& render: function(){&&&&&&&&& return (&&&&&&&&&&&&&&&&&& &&&&&&&&&& &div&&&&&&&&&&&&&& &button onClick={this.handClick}&显示|隐藏&/button&&&&&&&&&&&&&& &span ref="tip"&测试点击&/span&&&&&&&&&& &/div&&&&&&&&&& )&&&&&& &&&&&&&& }&&& });&&& &!-- ReactDom是React的一部分。ReactDOM是React和DOM之间的粘合剂，&&& 一般用来定义单一的组件，或者结合ReactDOM.findDOMNode（）来使用。&&& 更重要的是ReactDOM包已经允许开发者删除React包添加的非必要的代码，&&& 并将其移动到一个更合适的存储库。 --&&&&&& ReactDOM.render(&&&&&& &HelloMessage /&,&&&&&& document.getElementById('example')&&&&& );&&& &&&& &/script&& &/body&&/html&
输入框的绑定简单实现
&!DOCTYPE html&&html&& &head&& &meta charset="utf-8"&&&& &script src="../build/react.js"&&/script&&&& &script src="../build/react-dom.js"&&/script&&&& &script src="../build/browser.min.js"&&/script&& &/head&& &body&&&& &div id="example"&&/div&&&& &script type="text/babel"&&&& var HelloMessage=React.createClass({&&&&&&& getInitialState:function(){&&&&&&&&&&&&& return {&&&&&&&&&&&&&&& contentText:''&&&&&&&&&&&&& }&&&&&&& }, &&&&&&& changContent:function(event){&&&&&&&&&& this.setState({&&&&&&&&&&&&&&&& contentText: event.target.value&&&&&&&&&& })&&&&&&&&&&& event.stopPropagation()&&&&&&&&&&& event.preventDefault()&&&&&&& },&&&&&&& render: function(){&&&&&&&&& return (&&&&& &&&&&&&&&& &form&&&&&&&&&&&&&& &input type="text" placeholder="说点什么吧" onChange={this.changContent} /&&&&&&&&&&&&&& &p&{this.state.contentText}&/p&&&&&&&&&& &/form&&&&&&&&&& )&&&&&& &&&&&&&& },&&& });&&&&& ReactDOM.render(&&&&&& &HelloMessage /&,&&&&&& document.getElementById('example')&&&&& );&&& &&&& &/script&& &/body&&/html&
阅读(...) 评论()

我要回帖

更多关于 react nodejs 的文章

 

随机推荐