import React, { useState } from 'react';

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

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

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    onAuth(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">Submit</button>
    </form>
  );
};

export default AuthForm;
นำเข้าปฏิกิริยา { useState } จาก 'ปฏิกิริยา'; อุปกรณ์ประกอบฉากอินเทอร์เฟซ { onAuth: (ชื่อผู้ใช้: สตริง, รหัสผ่าน: สตริง) => เป็นโมฆะ; } const AuthForm: React.FC<Props> = ({ onAuth }) => { const [ชื่อผู้ใช้, setUsername] = useState(''); const [รหัสผ่าน, setPassword] = useState(''); const handleSubmit = (เหตุการณ์: React.FormEvent<HTMLFormElement>) => { event.preventDefault(); onAuth(ชื่อผู้ใช้, รหัสผ่าน); }; return ( <form onSubmit={handleSubmit}> <div> <label htmlFor="username">ชื่อผู้ใช้:</label> <input type="text" id="username" value={username} onChange={(event) => setUsername(event.target.value)} /> </div> <div> <label htmlFor="password">รหัสผ่าน:</label> <input type="password" id="password" value={password } onChange={(event) => setPassword(event.target.value)} /> </div> <button type="submit">ส่ง</button> </form> ); }; ส่งออก AuthForm เริ่มต้น;
spam fails_task lang_mismatch pii not_appropriate hate_speech sexual_content quality toxicity humor helpfulness creativity violence