Reactjs 如何防止用户输入以数字开头的用户名，但只允许在字母字符后输入数字？

下面是代码，我的问题是，当我想使用

startsWith（）

函数检查用户是否在前面输入了一个数字时，我会得到一个“TypeError:usernameField.startsWith不是函数”。 我如何防止用户输入以数字开头的用户名，但只允许在字母字符后输入数字，这样当用户将数字放在前面时，它会显示出来以供浏览，然后被替换为空

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，{Component}来自“React”；
从“/components/SignupForm”导入注册表单；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
用户名：“”，
};
this.changeValue=this.changeValue.bind（this）；
this.removeNumbers=this.removeNumbers.bind（this）；
}
更改值（事件）{
这是我的国家({
[event.target.name]：event.target.value，
});
}
RemoveNumber（用户名字段）{
设数字=/[0-9]/gi；
if（usernameField.startsWith（数字））{
usernameField.target.value=usernameField.target.value.replace（数字，“”）；
}
}
render（）{
返回(
);
}
}
导出默认应用程序；

从“React”导入React；
导出默认函数注册表（道具）{
返回(
报名表
);
}

问题

String.prototype.startsWith

不使用正则表达式模式

未正确访问

keyUp

事件对象。当

usernameField.startsWith（numbers）

应该是

usernameField.target.value.startsWith（numbers）

时，对其抛出错误

解决方案 我不认为有必要进行

onKeyUp

回调。您所描述的是，输入一段时间后，应进行检查，以测试

用户名

状态是否以数字开头

使用

String.prototype。将

替换为regex

/^[0-9]*/gi

使用检查从

componentDidUpdate

lifecycle方法调用的

username

状态值

代码：

功能注册表单（道具）{
返回(
报名表
);
}
导出默认类应用程序扩展组件{
状态={
用户名：“
};
componentDidUpdate（prevProps、prevState）{
if（prevState.username！==this.state.username）{
这是。RemovelReadingNumber（）；
}
}
changeValue=（事件）=>{
这是我的国家({
[event.target.name]：event.target.value
});
};
removeLeadingNumbers=去盎司(
() => {
this.setState（（prevState）=>({
用户名：prevState.username.replace（/^[0-9]*/gi，“”）
}));
},
1000,
{maxWait:3000}
);
render（）{
返回(
);
}
}

演示

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>
  );
}

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>
    );
  }
}