反应：Backspace的事件处理程序方法

我正在尝试处理用户按Backspace按钮时的事件。反应：Backspace的事件处理程序方法

我看到this，我只是想，我可以使用

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

找到Backspace键码但e.keyCode的价值是不确定的。

下面是代码：

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

更新：与onKeyPress事件我总是得到0

来源

2016-04-06 Kamyar Parastesh

如果你想拿到钥匙代码你或许应该倾听不同的事件。请参阅https://facebook.github.io/react/docs/events.html#keyboard-events。 –

@FelixKling我编辑了我的问题 –

你必须听onKeyDown事件捕捉删除操作。例子：

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

运行小提琴：https://jsfiddle.net/7eu41pzz/1/

来源

2016-04-06 07:39:12

反应：Backspace的事件处理程序方法

回答

相关问题