reactjs - react : Event handler method for Backspace

Question

我正在尝试处理用户按下 Backspace 按钮时的事件。

我看到了this ，我想我可以使用

找到 Backspace 键代码

console.log("删除了吗？"+ e.keyCode);

但是e.keyCode的值未定义。

这是代码:

define(["react"], (React) => {
  var TypingContainer = React.createClass({
    keypressed(e) {
      console.log("Did you delete it? " + e.keyCode);
    },

    handleChange: function(e) {
      // if (e.keycode == 8)
        console.log("Did you 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。

Answer 1

您必须监听 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>
        );
    }
});

运行 fiddle :https://jsfiddle.net/7eu41pzz/1/