связывание ключей в response.js

Question

пытался реализовать привязку ключей в response.js. сделал некоторые исследования, но все еще задавался вопросом, что является самым чистым способом сделать это. Например,

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

Answer 1

Я в конечном итоге связывания 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

Answer 2

Еще не добавил комментарий, чтобы комментировать ваш ответ, но я хотел бы предложить улучшение.

Попробуйте использовать пространство имен событий, когда вы привязываете/отменяете их. Это особенно важно при связывании события к телу, так как она позволяет отвязать, не нарушая каких-либо других привязок одного и того же типа:

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

Answer 3

Вот мой компонент поиска, пожалуйста, взгляните на функцию onSearch. Я не использую привязку клавиатуры для выполнения ввода и дефокусировки ключа escape-ключа.

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 4

шаг 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 
    } 
    }