ReactJs 输入：onKeyPressed 不会触发退格键

Question

我正在尝试在 React 中创建一个掩码，但是 onKeyPressed 它不会因为退格或删除而触发。它不允许删除输入。

这是我的代码：

export default class InputField extends React.Component {
    constructor(props) {
        super(props);
        this.state = { text: this.props.text };
        this.onKeyPress = this.onKeyPress.bind(this);
    }

    onKeyPress(event) {
        console.log(event.key);
        var mask = this.props.mask;
        var currentText = this.state.text || "";
        var invalidButtonPress = false;
        switch (mask) {
          case "number":
            if ("0123456789".indexOf(event.key) > -1) {
              this.setState({ text: currentText + event.key });
            } else {
              invalidButtonPress = true;
            }
            break;
          default:
            break;
        }
        if (invalidButtonPress) {
          // allow for arrow keys, tab and backspace.. but if none of those and invalid reset
          this.setState({ text: currentText }); // Reset back to original text
        }
    }

    render() {
        <Input
            type={this.props.type || "text"}
            value={this.state.text}
            mask={this.props.mask}
            onKeyPress={this.onKeyPress}
        >
        ...
    }
}

我尝试过onKeyDown 和OnKeyUp，它们可以检测退格，但这些事件我无法影响this.setState({}) 的输入值。

Answer 1

我已经尝试过 onKeyDown 和 OnKeyUp，它们确实可以检测退格，但是这些事件我无法通过 this.setState({}) 影响输入的值

React 允许您混合和匹配这些事件。因此，您可以保留 onKeyPress 以添加到您的输入，并使用 onKeyDown 或 onKeyUp 删除。