反应按键输入答案

【问题标题】：React keypress input反应按键输入
【发布时间】：2017-12-31 00:08:35
【问题描述】：

我试图阻止某些字符被输入，但由于某种原因，禁令没有发生。我哪里错了？

render () {
    return <form>
        <input
            id="username"
            type="text"
            placeholder="Username"
            value={this.state.value}
            onKeyPress={this.pale_username.bind(this)}
        />
    </form>
}

和功能

pale_username(key) {
    if((key.charCode < 48 || key.charCode > 57) //numbers
        && (key.charCode < 65 || key.charCode > 90) // AB
        && (key.charCode < 97 || key.charCode > 122) // ab
        && (key.charCode !== 36) // $
        && (key.charCode !== 38) // &
        && (key.charCode < 40 || key.charCode > 41) // ()
        && (key.charCode < 45 || key.charCode > 46) // -.
        && (key.charCode !== 95) // _
        && (key.charCode !== 127) // del
        && (key.charCode !== 8) // BackSpace
        && (key.charCode !== 46))
        return false;
}

【问题讨论】：

reactjs.org/docs/events.html#keyboard-events

标签： reactjs function keypress onkeypress

【解决方案1】：

我会在onChange 处理程序中处理字符“ban”。一个原因是，如果有人将某些内容复制并粘贴到您的输入中会发生什么？阻止键盘事件处理程序中的输入将不起作用。

我会尝试这样的事情：

handleChange(e) {
  // Use whatever regex you need.
  const filteredInput = e.target.value.replace(/[abAB$&()-_.*]|\d+/g, '');
  this.setState(value: filteredInput)
}

然后在你的输入中使用它。

<input
  id="username"
  type="text"
  placeholder="Username"
  value={this.state.value}
  onChange={this.handleChange.bind(this)}
/>

【讨论】：

谢谢！你还能告诉我如何不列出锁定的，而只允许一些吗？）
我只是把'^'放在开头
编辑了正则表达式。另外，我刚刚又看了你的问题。如果你想防止退格和删除，你应该在调用setState之前检查event.target.value是否比this.state.value短。
谢谢，但我认为我不需要这个，因为用户应该能够编辑））

【解决方案2】：

onKeyDown 检测到charCode 和onKeyPress 检测到keyCode。试试改成onKeyDown

【讨论】：

onKeyDown 对我不起作用，因为我正在寻找 charCode 字符
看看这个。这是一个类似的问题，有类似的答案！希望对你有帮助stackoverflow.com/questions/27827234/…
我试过了。问题依然存在。我仍然可以输入像“#”这样的字符
感谢您的尝试）我很高兴您尝试提供帮助。）上述决定奏效了。也许你也需要帮助）