如何基于Api resonse向react js添加电子邮件现有验证

import React, { useState } from 'react';
import axios from 'axios';

const EmailForm = () => {
  const [email, setEmail] = useState('');
  const [isValid, setIsValid] = useState(false);

  const handleEmailValidation = async () => {
    try {
      const response = await axios.post('/api/validate-email', { email });
      if (response.status === 200 && response.data.isValid) {
        setIsValid(true);
      } else {
        setIsValid(false);
      }
    } catch (error) {
      console.error('An error occurred:', error);
    }
  };

  return (
    <div>
      <input
        type="text"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <button onClick={handleEmailValidation}>Validate</button>
      {isValid ? <p>Email is valid!</p> : <p>Email is invalid.</p>}
    </div>
  );
};

export default EmailForm;