使用react ts 写一个登陆页面

好的，下面是一个简单的基于 React 和 TypeScript 的登录页面示例：

首先，我们需要安装 React 和 TypeScript 的依赖：

npm install react react-dom @types/react @types/react-dom
npm install typescript

接下来，我们创建一个名为 `LoginPage.tsx` 的文件，代码如下：

import React, { useState } from "react";

interface Credentials {
  username: string;
  password: string;
}

const LoginPage: React.FC = () => {
  const [credentials, setCredentials] = useState<Credentials>({
    username: "",
    password: "",
  });

  const handleInputChange = (
    event: React.ChangeEvent<HTMLInputElement>
  ): void => {
    const { name, value } = event.target;
    setCredentials((prevState) => ({
      ...prevState,
      [name]: value,
    }));
  };

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
    event.preventDefault();
    console.log(credentials);
    // TODO: 实现登录逻辑
  };

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="username">用户名：</label>
      <input
        type="text"
        id="username"
        name="username"
        value={credentials.username}
        onChange={handleInputChange}
      />
      <br />
      <label htmlFor="password">密码：</label>
      <input
        type="password"
        id="password"
        name="password"
        value={credentials.password}
        onChange={handleInputChange}
      />
      <br />
      <button type="submit">登录</button>
    </form>
  );
};

export default LoginPage;

在这个示例中，我们使用了 `useState` hook 来管理表单中的 `username` 和 `password` 的状态。在表单中，我们为每个 `<input>` 元素添加了一个 `name` 属性，这个属性与 `credentials` 对象中的属性名对应。当输入框中的值发生变化时，我们通过 `handleInputChange` 函数来更新 `credentials` 对象的值。在表单提交时，我们通过 `handleSubmit` 函数来获取表单中的数据，并且可以实现登录逻辑。

最后，我们可以在 `App.tsx` 文件中使用 `LoginPage` 组件：

import React from "react";
import LoginPage from "./LoginPage";

const App: React.FC = () => {
  return (
    <div>
      <LoginPage />
    </div>
  );
};

export default App;

这样就完成了一个简单的登录页面。当用户输入用户名和密码并点击登录按钮时，我们可以在控制台中输出表单数据，并且可以在 `handleSubmit` 函数中实现登录逻辑。