反应：退格事件处理程序方法

小编典典

反应：退格事件处理程序方法

reactjs

我试图在用户按下Backspace按钮时处理事件。

我看到了，我想我可以使用找到Backspace键代码

console.log("Did you delete it? " + 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。

阅读 236

2020-07-22

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

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

2020-07-22