Tastenbindung in react.js

Question

wurde versucht, Tastenbindung in react.js zu implementieren. habe etwas recherchiert, mich aber immer noch gefragt, was der sauberste Weg ist. Zum Beispiel endete

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

Answer 1

ich die keydown Ereignisbindung, wenn das Bauteil montiert und unmontiert:

...

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

...

Wahrscheinlich gibt es einen besseren Weg, um dies zu tun. Die Funktion wird als Teil einer Dialogkomponente verwendet: https://github.com/changey/react-dialog

Answer 2

Haben Sie noch nicht genug Rep, um Ihre Antwort zu kommentieren, aber ich würde gerne eine Verbesserung vorschlagen.

Versuchen Sie, Ereignis-Namespacing zu verwenden, wenn Sie diese binden/lösen. Dies ist besonders wichtig, wenn Ereignisse, um den Körper zu binden, wie es Ihnen ohne Unterbrechung alle anderen Bindungen des gleichen Typs zu entbinden erlaubt:

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

Answer 3

Hier ist meine Suchkomponente, bitte werfen Sie einen Blick auf die OnSearch-Funktion. Ich verwende keine Tastatureinbindung, um die Escape-Taste zu deaktivieren und die Defokussierung zu deaktivieren.

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

Schritt 1: Definieren es in Konstruktor

constructor(props) { 
    super(props); 

    this.state = {   
    } 
    this.handleEnterKeyPress = this.handleEnterKeyPress.bind(this) 
    } 

Schritt 2: Schreiben es Methode in render

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

Schritt 3: Schreiben der entsprechenden Funktion in der Klasse

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