React 登录锚点点击

import React, { useState } from 'react';

const App = () => {
 const [isLoggedIn, setIsLoggedIn] = useState(false);

 const handleLogin = () => {
 setIsLoggedIn(true);
 };

 const handleClick = (e) => {
 if (!isLoggedIn) {
 e.preventDefault();
 alert('Please login to access this content.');
 }
 };

 return (
 <div className="min-h-screen bg-gray-100 flex flex-col items-center justify-center p-4">
 <div className="max-w-4xl w-full bg-white shadow-lg rounded-lg p-8">
 <h1 className="text-4xl font-bold text-center mb-8">Welcome to Our Platform</h1>
 
 <div className="space-y-4">
 <div className="bg-gray-50 p-6 rounded-lg">
 <h2 className="text-2xl font-semibold mb-4">Featured Content</h2>
 <p className="text-gray-700">Discover the latest updates and news.</p>
 </div>
 
 <div className="bg-gray-50 p-6 rounded-lg">
 <h2 className="text-2xl font-semibold mb-4">Exclusive Content</h2>
 <p className="text-gray-700">
 <a
 href="#exclusive"
 className="text-blue-500 hover:text-blue-700"
 onClick={handleClick}
 >
 Click here to access exclusive content.
 </a>
 </p>
 </div>
 
 <div className="bg-gray-50 p-6 rounded-lg">
 <h2 className="text-2xl font-semibold mb-4">Login</h2>
 <button
 onClick={handleLogin}
 className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700"
 >
 Login
 </button>
 </div>
 </div>
 </div>
 </div>
 );
};

export default App;