[REACT] input 클릭이벤트

EX01

import { useState } from "react";

const EventPractice=()=>{
    const[username, setUsername] = useState('');
    const[message, setMessage] = useState('');

    const onChangeUsername=e=>setUsername(e.target.value);
    const onChangeMessage=e=>setMessage(e.target.value);
    const onClick=()=>{
        alert(username + " : " + message);
        setUsername(''); //공백으로 처리
        setMessage(''); //공백으로 처리
    }
    const onKeyPress=(e)=>{
        if(e.key==="Enter"){
            onClick();
        }    
    }
    return(
        <div>
            <h1>이벤트연습</h1>
            <input
            type="text"
            name="username"
            placeholder="사용자명"
            value={username}
            onChange={onChangeUsername}
            />
            <input
            type="text"
            name="message"
            placeholder="아무글자나 입력"
            value={message}
            onChange={onChangeMessage}
            onKeyPress={onKeyPress}
            />
            <button onClick={onClick}>확인</button>
        </div>
    )
}

export default EventPractice;

 

EX02

import { useState } from "react";

const EventPractice=()=>{
    const[form, setForm] = useState({
        username:"",
        message:""
    })
    const{username,message}=form;
    const onChange=(e)=>{
        const nextForm={
            ...form, //기존의 from내용을 이 자리에 복사
            [e.target.name]:e.target.value //원하는 값을 대체
        }
        setForm(nextForm);
    }
    const onClick=()=>{
        alert(username + " : " + message);
        setForm({
            username:"",
            message:""
        })
    }
    const onKeyPress=(e)=>{
        if(e.key==="Enter"){
            onClick();
        }    
    }
    return(
        <div>
            <h1>이벤트연습</h1>
            <input
            type="text"
            name="username"
            placeholder="사용자명"
            value={username}
            onChange={onChange}
            />
            <input
            type="text"
            name="message"
            placeholder="아무글자나 입력"
            value={message}
            onChange={onChange}
            onKeyPress={onKeyPress}
            />
            <button onClick={onClick}>확인</button>
        </div>
    )
}

export default EventPractice;