form

import React, { useState } from 'react'
 
function LoginPage() {
 
    const [Id, setId] = useState('');
    const [Pwd, setPwd] = useState('');
 
    const onIdHandler = e => {
        setId(e.currentTarget.value)
    }
 
    const onPwdHandler = e => {
        setPwd(e.currentTarget.value)
    }
 
 
    const onSubmitHandler = e => {
        e.preventDefault();
        alert(`${Id} // ${Pwd}`)
    }
 
    return (
        <div>
            <form onSubmit={onSubmitHandler}>
 
                <label htmlFor="id">아이디</label>
                <input type="text" name="id" value={Id} onChange={onIdHandler} />
                  
                <label htmlFor="pwd">비밀번호</label>
                <input type="password" name="pwd" value={Pwd} onChange={onPwdHandler} />
 
                <button type="submit">로그인</button>
 
            </form>
        </div>
    )
}
 
export default LoginPage
 

 

input여러개 관리하기

https://react.vlpt.us/basic/09-multiple-inputs.html

9. 여러개의 input 상태 관리하기 · GitBook