如何通过挂钩使用正则表达式验证react中的输入字段

import React, { useState } from 'react';

function MyForm() {
  const [inputValue, setInputValue] = useState('');
  const [isValid, setIsValid] = useState(true);

  // 其他代码...

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      {!isValid && <p>输入无效，请检查格式。</p>}
    </div>
  );
}

function validateInput(input) {
  const regex = /^[a-zA-Z0-9]+$/;
  return regex.test(input);
}

function MyForm() {
  // ...

  function handleInputChange(e) {
    const inputValue = e.target.value;
    const isValid = validateInput(inputValue);
    setInputValue(inputValue);
    setIsValid(isValid);
  }

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={handleInputChange}
      />
      {!isValid && <p>输入无效，请检查格式。</p>}
    </div>
  );
}