「React」からReact、{ussestate}をインポートします。

インターフェイスプロップ{
  オンライン：（ユーザー名：文字列、パスワード：文字列）=> void;
}

Cost AuthComponent：React.FC <Props> =（{オンライン}）=> {
  const [username、setusername] = ussestate（ ''）;
  const [password、setPassword] = uesestate（ '' '）;

  const handleSubmit =（event：React.Formevent）=> {
    event.preventdefault（）;
    onouth（username、password）;
  };

  戻る （
    <div style = {{display： 'flex'、flexdirection： 'column'、alignitis： 'center'、justifycontent： 'center'} >>
      <form onsubmit = {handesubmit} style = {display： 'flex'、flexdirection： 'column'、alignitems：center '、justifycontent：center、padding：20} >>>>>>>>>
        <div style = {{display： 'flex'、flexdirection： 'row'、alignitems：center '、justifycontent：center、margin：10} >>>
          <ラベルhtmlfor = "username" style = {{marginright：10}> username：</ label>
          <入力
            type = "text"
            id = "username"
            value = {username}
            onchange = {（event）=> setUsername（event.target.value）}
            style = {{padding：10、fontsize：16}}
          />
        </div>
        <div style = {{display： 'flex'、flexdirection： 'row'、alignitems：center '、justifycontent：center、margin：10} >>>
          <ラベルhtmlfor = "password" style = {{marginright：10}> password：</ label>
          <入力
            type = "password"
            ID = "パスワード"
            値= {パスワード}
            onchange = {（event）=> setPassWord（event.target.Value）}
            style = {{padding：10、fontsize：16}}
          />
        </div>
        <button type = "submit" style = {{padding：10、margintop：20、fontsize：18、backgroundcolor： 'lightblue'、borderradius：5}> submit </button>
      </ form>
    </div>
  ）;
};

デフォルトのauthcomponentをエクスポートします。
import React, { useState } from 'react';

interface Props {
  onAuth: (username: string, password: string) => void;
}

const AuthComponent: React.FC<Props> = ({ onAuth }) => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault();
    onAuth(username, password);
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
      <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 20 }}>
        <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', margin: 10 }}>
          <label htmlFor="username" style={{ marginRight: 10 }}>Username:</label>
          <input
            type="text"
            id="username"
            value={username}
            onChange={(event) => setUsername(event.target.value)}
            style={{ padding: 10, fontSize: 16 }}
          />
        </div>
        <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', margin: 10 }}>
          <label htmlFor="password" style={{ marginRight: 10 }}>Password:</label>
          <input
            type="password"
            id="password"
            value={password}
            onChange={(event) => setPassword(event.target.value)}
            style={{ padding: 10, fontSize: 16 }}
          />
        </div>
        <button type="submit" style={{ padding: 10, marginTop: 20, fontSize: 18, backgroundColor: 'lightblue', borderRadius: 5 }}>Submit</button>
      </form>
    </div>
  );
};

export default AuthComponent;