key binding in react.js

wurde versucht, die Umsetzung der zentralen Bindung in react.js. habe einige der Forschung, aber immer noch Fragen, was ist der sauberste Weg, es zu tun. Zum Beispiel,

if (event.keyCode == 13 /*enter*/) {
  function()
}
if (event.keyCode == 27 /*esc*/) {
  anotherfunction()
}
InformationsquelleAutor changey | 2015-04-09
  1. 10

    Landete ich verbindlich das keydown-Ereignis, wenn die Komponente montiert und ausgehängt:

    ...

    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 ein besserer Weg, dies zu tun. Die Funktion wird verwendet, da ein Teil der dialog-Komponente: https://github.com/changey/react-dialog

    • Würde nicht raten, mit jQuery, um diese zu bewältigen, wenn man entweder mit den Pfeiltasten Funktionen zum automatischen binden handleKeyDown oder legen Sie die binden für handleKeyDown in den Konstruktor.
    InformationsquelleAutor changey
  2. 2

    Schritt 1 : Definieren Sie im Konstruktor 

      constructor(props) {
    super(props);

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

    Schritt 2 : Schreiben Sie es in der render-Methode 

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

    Schritt 3 : schreiben Sie die jeweilige Funktion in der Klasse

    handleEnterKeyPress(e) {
    if (e.charCode == 13) {
      //your code
    }
  }
    InformationsquelleAutor Ashutosh Ranjan
  3. 0

    Hier ist meine Suche-Komponente, werfen Sie bitte einen Blick auf die onSearch Funktion. Ich verwende keine Tastatur-Bindung zu erreichen, die escape-Taste clearing-Eingang und-Defokussierung.

    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>
    )
  }
}
    InformationsquelleAutor azz0r
  4. -3

    Haben noch nicht einmal genug rep Kommentar auf deine Antwort noch, aber ich würde gern vorschlagen, eine Verbesserung.

    Versuchen mit event-Namensräume, wenn Sie die bind/unbind diese. Dies ist besonders wichtig, wenn die Bindung von Ereignissen an den Körper, da es ermöglicht, Sie zu lösen, ohne zu stören andere Bindungen vom gleichen Typ:

    Finden Sie unter:

    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();
  }
},
    • vielen Dank für Ihren Vorschlag!
    InformationsquelleAutor jjroman
Schreibe einen Kommentar