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

インターフェイスプロップ{
  onauth：（username：string、password：string、forgotpassword：boolean）=> void;
}

コスト認証：React.FC <Props> =（{Onouth}）=> {
  const [username、setusername] = ussestate（ ''）;
  const [password、setPassword] = uesestate（ '' '）;
  cost [forgotpassword、setforgotpassword] = ussestate（false）;

  const handleSubmit =（event：React.Formevent <htmlformelement>）=> {
    event.preventdefault（）;
    onauth（username、password、forgotpassword）;
  };

  戻る （
    <form onsubmit = {handesubmit}>
      <div>
        <ラベルhtmlfor = "username"> username：</ label>
        <入力
          type = "text"
          id = "username"
          value = {username}
          onchange = {（event）=> setUsername（event.target.value）}
        />
      </div>
      <div>
        <ラベルhtmlfor = "password">パスワード：</ label>
        <入力
          type = "password"
          ID = "パスワード"
          値= {パスワード}
          onchange = {（event）=> setPassWord（event.target.Value）}
        />
      </div>
      <div>
        <入力
          type = "チェックボックス"
          id = "忘れたパスワード"
          checked = {forgotpassword}
          onchange = {（event）=> setforgotpassword（event.target.checked）}
        />
        <ラベルhtmlfor = "forgot-password">パスワードを忘れましたか？</ label>
      </div>
      <ボタンタイプ= "submit">送信</button>
    </ form>
  ）;
};

デフォルトのauthformをエクスポートします。

「パスワードを忘れた」というチェックボックスを使用して、新しい<div>要素がコードに追加されました。送信ボタンの前。新しいForgPassword状態も追加されました。これは、HandLesubmitメソッドを介してフォームを送信するときにインストールおよび処理されます。
import React, { useState } from 'react';

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

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

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

  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>
      <div>
        <input
          type="checkbox"
          id="forgot-password"
          checked={forgotPassword}
          onChange={(event) => setForgotPassword(event.target.checked)}
        />
        <label htmlFor="forgot-password">Забыли пароль?</label>
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};

export default AuthForm;

В код был добавлен новый элемент <div> с чекбоксом "Забыли пароль?" перед кнопкой отправки. Также было добавлено новое состояние forgotPassword, которое устанавливается и обрабатывается при отправке формы через метод handleSubmit.