如何解决如何防止用户输入以数字开头的用户名,但只允许在字母字符后输入数字?
我有这个代码,我的问题是当我想检查用户是否使用 startsWith()
函数在前面输入了一个数字时,我得到一个“TypeError: usernameField.startsWith is not a function”。
如何防止用户输入以数字开头的用户名,但只允许在字母字符后输入数字,这样当他们将数字放在前面时,它会显示一目了然,然后被替换为空?
import React,{ Component } from "react";
import SignupForm from "./components/SignupForm";
class App extends Component {
constructor() {
super();
this.state = {
username: "",};
this.changeValue = this.changeValue.bind(this);
this.removeNumbers = this.removeNumbers.bind(this);
}
changeValue(event) {
this.setState({
[event.target.name]: event.target.value,});
}
removeNumbers(usernameField) {
let numbers = /[0-9]/gi;
if (usernameField.startsWith(numbers)) {
usernameField.target.value = usernameField.target.value.replace(numbers,"");
}
}
render() {
return (
<div className="App">
<SignupForm
changeValueHandler={this.changeValue}
usernameValue={this.state.username}
usernameCharacterFilter={this.removeNumbers}
/>
</div>
);
}
}
export default App;
import React from "react";
export default function SignupForm(props) {
return (
<div className="container">
<h1>Signup Form</h1>
<div className="form-div">
<form>
<input
name="username"
type="text"
placeholder="Username"
onChange={props.changeValueHandler}
onKeyUp = {props.usernameCharacterFilter}
value={props.usernameValue}
/>
</form>
</div>
</div>
);
}
解决方法
问题
-
String.prototype.startsWith
不使用正则表达式模式。 - 未正确访问
keyUp
事件对象。在usernameField.startsWith(numbers)
上抛出错误,而它应该是usernameField.target.value.startsWith(numbers)
。
解决方案
我不认为 onKeyUp
回调是必要的。您所描述的是在输入一段时间后,应该进行检查以测试 username
状态是否以数字开头。
- 将
String.prototype.replace
与正则表达式/^[0-9]*/gi
一起使用。 - 使用 debounced callback 检查从
username
生命周期方法调用的componentDidUpdate
状态值。
代码:
function SignupForm(props) {
return (
<div className="container">
<h1>Signup Form</h1>
<div className="form-div">
<form>
<input
name="username"
type="text"
placeholder="Username"
onChange={props.changeValueHandler}
value={props.usernameValue}
/>
</form>
</div>
</div>
);
}
export default class App extends Component {
state = {
username: ""
};
componentDidUpdate(prevProps,prevState) {
if (prevState.username !== this.state.username) {
this.removeLeadingNumbers();
}
}
changeValue = (event) => {
this.setState({
[event.target.name]: event.target.value
});
};
removeLeadingNumbers = debounce(
() => {
this.setState((prevState) => ({
username: prevState.username.replace(/^[0-9]*/gi,"")
}));
},1000,{ maxWait: 3000 }
);
render() {
return (
<div className="App">
<SignupForm
changeValueHandler={this.changeValue}
usernameValue={this.state.username}
/>
</div>
);
}
}
演示
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。