如何在React类组件的文本输入框中禁止用户输入数字或特殊字符

你当前编写的代码失效的核心原因是onChange事件在输入框值更新后才触发，此时调用e.preventDefault()无法拦截已经完成的输入行为。

推荐实现方式（覆盖所有输入场景） #

直接在onChange触发时过滤掉输入内容中的所有数字，再更新到状态中，这种方式可以覆盖打字输入、粘贴输入、拖拽输入等所有场景：

nameChangeHandler = (e) => {
    const userInput = {...this.state.userInput};
    // 全局替换所有数字为空，实现过滤效果
    const filteredValue = e.currentTarget.value.replace(/[0-9]/g, '');
    userInput[e.currentTarget.name] = filteredValue;
    this.setState({
      userInput
    })
}

对应的JSX输入框需要修正value绑定逻辑，和你的状态结构对应：

<input id="nameInput" type="text" name="username" value={this.state.userInput.username} onChange={this.nameChangeHandler} />

可选补充：按键实时拦截 #

如果需要避免输入过程中数字短暂出现再消失的情况，可以额外增加onKeyDown事件，在用户按下数字键时就直接拦截：

preventNumberInput = (e) => {
  // 匹配数字按键（包含主键盘和小键盘数字），触发拦截
  if(/[0-9]/.test(e.key)) {
    e.preventDefault();
  }
}

更新后的JSX代码：

<input id="nameInput" type="text" name="username" value={this.state.userInput.username} onChange={this.nameChangeHandler} onKeyDown={this.preventNumberInput} />

内容的提问来源于stack exchange，提问作者NoushadM