确保输入值是reactjs中的字符串

Question

我正在开发一个reactjs应用程序，我希望我的用户在输入字段中只能输入字母。这是我的密码。

<input value= {this.state.val} onChange = {this.handleVal}/>

handleVal = (e)=>{
this.setState({
val:e.target.value
})
}

state = {
val:''
}

我的组件有很多代码，但我只输入了相关的代码。提前谢谢。

Answer 1

您可以使用正则表达式测试，并且只有在通过onChange处理程序的测试时才更新输入状态

/^[a-zA-Z]*$/

onChange处理程序中的用法

handleVal = (e) => {
const value = e.target.value;
const regMatch = /^[a-zA-Z]*$/.test(value);
if (regMatch) {
this.setState({
val: value
})
}
};

Answer 2

您可以使用onKeyPress方法，它将避免从字母表中键入任何其他内容。

<input placeholder="Enter Alphabets only" onKeyPress={this.onKeyPress} onChange={this.onChange} />
onKeyPress = (event) => {
if((event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && 
event.charCode < 123)){
return true;
}
return false;
}
onChange =  (e) => {
console.log('_________', e.target.value);
this.setState({
value: e.target.value
})
}