「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'}>
<form onsubmit = {handlesubmit} style = {{width：'50％ '}>
<div style = {{display： 'flex'、flexdirection： 'column'、alignitis： 'center'、margin： '1rem'}>
<ラベルhtmlfor = "username" style = {{mirvids： '1rem'} >>
ユーザー名：
</ label>
<入力
type = "text"
id = "username"
value = {username}
onchange = {（event）=> setUsername（event.target.value）}
style = {{padding： '0.5rem'、fontsize： '1.2rem'、margin： '1rem'}}}
/>
</div>
<div style = {{display： 'flex'、flexdirection： 'column'、alignitis： 'center'、margin： '1rem'}>
<ラベルhtmlfor = "password" style = {{mign： '1rem'} >>
パスワード：
</ label>
<入力
type = "password"
ID = "パスワード"
値= {パスワード}
onchange = {（event）=> setPassWord（event.target.Value）}
style = {{padding： '0.5rem'、fontsize： '1.2rem'、margin： '1rem'}}}
/>
</div>
<button type = "submit" style = {{padding： '0.5rem'、fontsize： '1.2Rem'、margin： '1rem'}>
送信
</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' }}>
<form onSubmit={handleSubmit} style={{ width: '50%' }}>
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', margin: '1rem' }}>
<label htmlFor="username" style={{ margin: '1rem' }}>
Username:
</label>
<input
type="text"
id="username"
value={username}
onChange={(event) => setUsername(event.target.value)}
style={{ padding: '0.5rem', fontSize: '1.2rem', margin: '1rem' }}
/>
</div>
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', margin: '1rem' }}>
<label htmlFor="password" style={{ margin: '1rem' }}>
Password:
</label>
<input
type="password"
id="password"
value={password}
onChange={(event) => setPassword(event.target.value)}
style={{ padding: '0.5rem', fontSize: '1.2rem', margin: '1rem' }}
/>
</div>
<button type="submit" style={{ padding: '0.5rem', fontSize: '1.2rem', margin: '1rem' }}>
Submit
</button>
</form>
</div>
);
};

export default AuthComponent;