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删除。

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

1 个答案: