react.js中的密钥绑定
key binding in react.js
试图在react.js中实现密钥绑定。做了一些研究,但仍然想知道什么是最干净的方法。例如,
if (event.keyCode == 13 /*enter*/) {
function()
}
if (event.keyCode == 27 /*esc*/) {
anotherfunction()
}
当组件安装和卸载时,我最终绑定了keydown事件:
componentDidMount: function() {
$(document.body).on('keydown', this.handleKeyDown);
},
componentWillUnMount: function() {
$(document.body).off('keydown', this.handleKeyDown);
},
handleKeyDown: function(event) {
if (event.keyCode == 13 /*enter*/) {
this.okAction();
}
if (event.keyCode == 27 /*esc*/) {
this.cancelAction();
}
},
render: function() {
return this.state.showDialog ? (
<div className="dialog" onKeyDown={this.handleKeyDown}>
也许有更好的方法可以做到这一点。该函数用作对话框组件的一部分:https://github.com/changey/react-dialog
步骤1:在构造函数中定义它
constructor(props) {
super(props);
this.state = {
}
this.handleEnterKeyPress = this.handleEnterKeyPress.bind(this)
}
步骤2:将其写入呈现方法
render() {
return (
<input className ="pageText" type="text" value= "value" onKeyPress = {this.handleEnterKeyPress} />
)
}
步骤3:在类中写入相应的函数
handleEnterKeyPress(e) {
if (e.charCode == 13) {
// your code
}
}
这是我的搜索组件,请看一下onSearch函数。我使用无键盘绑定来完成转义键清除输入和散焦。
import React from "react"
import _debounce from "lodash.debounce"
import "./stylesheets/search"
export default class Search extends React.Component {
displayName = "Search"
static propTypes = {
bucketName: React.PropTypes.string,
placeholder: React.PropTypes.string,
onSearchUpdated: React.PropTypes.func,
}
state = {
search: "",
placeholder: "Search",
bucketName: "",
}
componentWillMount() {
this.delayedCallback = _debounce((event) => {
let search = event.target.value
this.setState({
search,
})
this.props.onSearchUpdated(search, this.props.bucketName)
})
}
onSearch = (event) => {
if (event.keyCode === 27) {
event.target.value = ''
this.refs.input.blur()
} else {
this.refs.input.focus()
}
event.persist()
this.delayedCallback(event)
}
render() {
return (
<div className="search">
<div className="row">
<div className="col-xs-12 search__container form-group">
<input
ref="input"
className="form-control search__field"
placeholder={this.props.placeholder}
name="search__field"
id="search__field"
type="text"
onKeyDown={this.onSearch}
/>
</div>
</div>
</div>
)
}
}
还没有足够的代表来评论你的答案,但我想建议改进。
绑定/取消绑定时,请尝试使用事件名称空间。当将事件绑定到主体时,这一点尤为重要,因为它允许您在不中断任何其他相同类型的绑定的情况下解除绑定:
请参阅:
https://css-tricks.com/namespaced-events-jquery/
componentDidMount: function() {
$(document.body).on('keydown.awesomeNamespaceName', this.handleKeyDown);
},
componentWillUnMount: function() {
$(document.body).off('keydown.awesomeNamespaceName', this.handleKeyDown);
},
handleKeyDown: function(event) {
if (event.keyCode == 13 /*enter*/) {
this.okAction();
}
if (event.keyCode == 27 /*esc*/) {
this.cancelAction();
}
},
相关文章:
- 在VanillaJS中模拟模型双向数据绑定
- 无法通过数组映射绑定
- 主干-不管怎样,检查事件以前是否绑定过
- 用于搜索的聚合物嵌套绑定
- Angular:更新一次性绑定的数据
- 如何使用ngrepeat和双向绑定获得指令的隔离范围
- API密钥使用和检查示例
- react.js中的密钥绑定
- 使用regex的jquery keydown绑定不会验证撇号和句点
- 将事件处理程序绑定到任何可能的事件
- AngularJS指令只识别双向绑定类型
- Telerik rad组合框多列数据绑定
- 对密钥绑定谷歌浏览器扩展程序的操作
- 使用d3.svg.path()绑定密钥
- 当URL通过HTML更改时,带有jQuery密钥绑定的AngularJS指令未正确加载绑定
- 重置密钥绑定-Ace编辑器
- 是否有人在Meteor中成功创建了密钥绑定
- jwerty密钥解除绑定
- StackOverflow CMD-K密钥绑定是如何工作的
- 使用Jquery绑定密钥