Reagieren: Event-handler-Methode für Sie die Rücktaste

Ich bin versucht, ein Ereignis zu behandeln, wenn der Benutzer drücken Sie die Backspace-Taste.

Sah ich diese, und ich denke, hier finde ich die Rücktaste Schlüssel-code mit

console.log( "Did u delete it? "+ e.keyCode);

aber der Wert von e.keyCode ist nicht definiert.

Hier ist der code:

define(["react"], (React) => {

  var TypingContainer = React.createClass({
   keypressed(e){

      console.log( "Did u delete it"+ e.keyCode);
  },

    handleChange: function(e) {

      // if(e.keycode==8)
            console.log( "Did u delete it?  "+ e.keyCode);


    },

    render: function() {
      return(
         <div>

            <input
              className="typing-container"
              value={this.state.message}
              onChange={this.handleChange}
              onKeyPress={this.keypressed}

            />

         </div>
      );
    }
  })
  return TypingContainer;
});

Update: mit onKeyPress Fall bekomme ich immer 0.

Sollten Sie wahrscheinlich hören ein anderes Ereignis, wenn Sie wollen, bekommen Sie den Schlüssel-code. Siehe facebook.github.io/reagieren/docs/events.html#Tastatur-Ereignissen .
ich habe meine Frage bearbeitet

InformationsquelleAutor Kamyar Parastesh | 2016-04-06

  1. 13

    Müssen Sie hören das onKeyDown-Ereignis zu erfassen, die Aktion löschen.
    Beispiel:

    var InputDemo = React.createClass({

    getInitialState: function() {
    return {
        message: ''
    };
  },
  onKeyDown: function(e) {
    if (e.keyCode === 8) {
     console.log('delete');
    }
  },
  handleChange: function(e) {
    this.setState({
        message: e.target.value
    });
  },

  render: function() {
    return <div>
            <input
              value={this.state.message}
              onChange={this.handleChange}
              onKeyDown={this.onKeyDown}
            />
                </div>;
  }
});

    Läuft fiddle: https://jsfiddle.net/7eu41pzz/1/

    InformationsquelleAutor Richard Rutsche

  2. 0

    Je nach Implementierung, die Sie verwenden sollten onKeyUp die dafür sorgen soll der Wert der Eingabe geändert wurde, bevor das Ereignis ausgelöst wird.

    Basierend auf der obigen Antwort 

    var InputDemo = React.createClass({

    getInitialState: function() {
    return {
        message: ''
    };
  },
  onKeyUp: function(e) {
    //This would have the current value after hitting backspace.
    if (e.keyCode === 8) { 
     console.log('delete');
     console.log(`Value after clearing input: "${e.target.value}"`)
     //Value after clearing input: ""
    }
  },
  onKeyDown: function(e) {
    //This would have the value set regardless of hitting backspace "test"
    if (e.keyCode === 8) { 
     console.log('delete');
     console.log(`Value after clearing input: "${e.target.value}"`)
     //Value after clearing input: "Test"
    }
  },
  handleChange: function(e) {
    this.setState({
        message: e.target.value
    });
  },
  render: function() {
    return (
       <div>
          <input
            value={this.state.message}
            onChange={this.handleChange}
            onKeyDown={this.onKeyDown}
            onKeyUp={this.onKeyUp}
          />
       </div>
    );
  }
});

    InformationsquelleAutor jackotonye

Schreibe einen Kommentar