在react js中验证用户输入

import React, { useState } from 'react';

function MyForm() {
  const [username, setUsername] = useState('');

  const handleChange = (event) => {
    setUsername(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    // 进行验证和处理提交逻辑
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={username}
        onChange={handleChange}
      />
      <button type="submit">提交</button>
    </form>
  );
}

export default MyForm;

const handleSubmit = (event) => {
  event.preventDefault();

  if (username.length < 4) {
    alert('用户名长度必须大于等于4');
    return;
  }

  // 其他验证逻辑和处理提交
};