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

Question

我有下面的代码，我的麻烦是当我想检查用户是否在前面使用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>
  );
}

Answer 1

问题

1. String.prototype.startsWith不使用正则表达式模式。
2. 未keyUp正确访问事件对象。usernameField.startsWith(numbers)应该在什么时候抛出错误usernameField.target.value.startsWith(numbers)。

解决方案

我不认为onKeyUp回调是必要的。您描述想要的是在输入一段时间后，应该进行检查以测试username状态是否以数字开头。

1. String.prototype.replace与正则表达式一起使用/^[0-9]*/gi。
2. 使用debounced 回调检查从生命周期方法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>
    );
  }
}

演示