Key binding in .js reaction

Question

tried to implement key binding in response.js. did some research, but still wondered what the cleanest way to do this. For example,

if (event.keyCode == 13 /*enter*/) { function() } if (event.keyCode == 27 /*esc*/) { anotherfunction() } 

Answer 1

I completed the keydown event binding when the component is mounted and unmounted:

...

 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}> 

...

Probably the best way to do this. The function is used as part of the dialog component: https://github.com/changey/react-dialog

Answer 2

Here is my search component, please take a look at the onSearch function. I do not use keyboard binding to do input and defocus the escape key.

 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> ) } } 

Answer 3

Step 1: Define It In The Constructor

  constructor(props) { super(props); this.state = { } this.handleEnterKeyPress = this.handleEnterKeyPress.bind(this) } 

step 2: write it to the rendering method

  render() { return ( <input className ="pageText" type="text" value= "value" onKeyPress = {this.handleEnterKeyPress} /> ) } 

Step 3: write the appropriate function in the class

 handleEnterKeyPress(e) { if (e.charCode == 13) { // your code } } 

Answer 4

There are no comments yet to comment on your answer, but I would like to suggest an improvement.

Try using the event namespace when you bind / undo them. This is especially important when binding events to the body, as it allows you to disconnect without breaking any other bindings of the same type:

See:
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(); } },