React：Backspace 的事件处理程序方法

Question

我试图处理用户按下Backspace按钮时触发的事件。

我看到了这个，我猜我可以使用console.log("Did you delete it? " + e.keyCode);来找到Backspace键码。

但是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。

- Jeff

---

如果你想获取按键代码，那么你应该监听不同的事件。请参考 https://facebook.github.io/react/docs/events.html#keyboard-events 。 - Felix Kling

@FelixKling 我已经编辑了我的问题。 - Jeff

keyCode已经被弃用。你应该使用key代替。这样，e.keyCode == 8就变成了e.key === 'Backspace'。 - Christopher Bradshaw

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/

- Richard Rutsche

Answer 2

根据您的实现，您应该使用 onKeyUp，这将确保在触发事件之前输入值已被修改。根据最初的回答。

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

最初的回答：

按下键盘时触发的事件按以下顺序依次发生：

1. keydown事件：在用户按下键时发生。即使所按的键没有产生字符值，此事件也会发生。

2. keypress事件：在用户按下能够产生字符值的按键时发生。这些按键包括字母、数字和标点符号键。例如“Shift”、“CapsLock”、“Ctrl”等修改键不会产生字符，因此它们没有与之关联的‘keypress’事件。

3. keyup事件：在用户释放键后发生。即使所释放的键没有产生字符值，此事件也会发生。

- jackotonye

Answer 3

我的方法要简单得多。通常您会有一些初始/默认状态：

import React, { useState } from 'react';

const initialState = {
  firstName: '',
  lastName: '',
  streetAddress1: '',
  streetAddress2: '',
  city: '',
  state: '',
  postCode: '',
  country: '',
  phone: '',
};

const Demo = () => {
  const [state, setState] = useState(initialState);

  const handleChange = (prop) => (e) => {
    setState({
      ...state,
      [prop]: e.target.value || e.target.checked || initialState[prop],
    });
  };

  return (
    <div>
      <label htmlFor="first-name">First Name</label>
      <br />
      <input
        id="first-name"
        value={state.firstName}
        onChange={handleChange('firstName')}
        aria-label="First Name"
      />
      <br />
      <label htmlFor="last-name">Last Name</label>
      <br />
      <input
        id="last-name"
        value={state.lastName}
        onChange={handleChange('lastName')}
        aria-label="Last Name"
      />
      <p>{`${state.firstName} ${state.lastName}`}</p>
    </div>
  );
}

export default Demo;

https://codesandbox.io/s/happy-albattani-kgmq1?file=/src/Demo.js

- Wayne Patterson