Tela de login simples em React com TypeScript

Prévia do material em texto

Tela de login simples em React com TypeScript (tsx). 
 
import { useState } from "react"; 
 
interface LoginFormProps { 
 onSubmit: (username: string, password: string) => void; 
} 
 
const LoginForm: React.FC<LoginFormProps> = ({ onSubmit }) => { 
 const [username, setUsername] = useState(""); 
 const [password, setPassword] = useState(""); 
 
 const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => { 
 event.preventDefault(); 
 onSubmit(username, password); 
 }; 
 
 return ( 
 <form onSubmit={handleSubmit}> 
 <div> 
 <label htmlFor="username">Username:</label> 
 <input 
 type="text" 
 id="username" 
 value={username} 
 onChange={(event) => setUsername(event.target.value)} 
 /> 
 </div> 
 <div> 
 <label htmlFor="password">Password:</label> 
 <input 
 type="password" 
 id="password" 
 value={password} 
 onChange={(event) => setPassword(event.target.value)} 
 /> 
 </div> 
 <button type="submit">Login</button> 
 </form> 
 ); 
}; 
 
export default LoginForm; 
 
Para usar esse componente em outro arquivo, você pode importá-lo e renderizá-lo como 
qualquer outro componente React: 
 
import LoginForm from "./LoginForm"; 
 
const handleLogin = (username: string, password: string) => { 
 // Faça a lógica de login aqui 
}; 
 
const LoginPage: React.FC = () => { 
 return ( 
 <div> 
 <h1>Login Page</h1> 
 <LoginForm onSubmit={handleLogin} /> 
 </div> 
 ); 
}; 
 
export default LoginPage; 
 
Observe que neste exemplo, handleLogin é a função que você usaria para fazer a lógica real 
de login, como enviar uma solicitação ao servidor ou verificar as credenciais do usuário 
localmente. Essa função é passada como uma prop onSubmit para o componente LoginForm.