如何在输入的按键上停止允许特殊字符

Question

我有以下输入

handleNameChange(event = {}) {
        console.log('event', event);
        this.setState({ reportCalculationName: event.target.value });
    }

onKeyPress(event) {
    let character = event.keyCode;
    console.log('character', character);
}


<div className="col-md-4">
   <label className="col-md-5">Calculation Name:</label>
    <input type="text" className="" id="calculation-name" title="Name" 
          onChange={this.handleNameChange} 
           value=this.state.reportCalculationName } onKeypress={this.onKeyPress}/>
  </div>

当我输入一些特殊字符时，Keypress事件甚至不会触发。我想在我的反应组件的输入字段中停止允许`，。“'| / + =]这些字符

Answer 1

您可以使用event.preventDefault（）取消keypress事件。

伪代码：

onKeyPress(event) {
    var key = window.event ? event.keyCode : event.which;
    if (key === [enter your value here]) {
        event.preventDefault(); <=== this will cancel the input
    } else {
       return true;
    }
    console.log('character', character);
    return false;
}

您可以在这里找到更多信息：

https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault