[REACT] Event

                <input

                    type="text"

                    name="message"

                    placeholder="입력"

                    onChange={(e) => {console.log(e.target.value);}}>

                </input>

e.target.value : 이벤트 발생할 때, 앞으로 변할 인풋 값 

 

import { useState } from "react"

const EventPrac = () => {

    const [username, setUsername] = useState('');

    const [messeage, setMessage] = useState('');

    const onChangeUser = event => setUsername(event.target.value);

    const onChangeMes = event => setMessage(event.target.value);

    const onClick = () => {

        alert(username + ':' + messeage);

        setUsername('');

        setMessage('');

    };

    const onKeyDown= event => {

        if(event.key === 'Enter'){

            onClick();

        }

    };

    return (

        <div>

            <h1>이벤트 연습</h1>

            <input

                type="text"

                name="username"

                placeholder="사용자명"

                value={username}

                onChange={onChangeUser}

            />

            <input

                type="text"

                name="message"

                placeholder="입력하세요"

                value={messeage}

                onChange={onChangeMes}

                onKeyDown={onKeyDown}

            />

            <button onClick={onClick}>확인</button>

        </div>

    );

};

export default EventPrac;

 

e.target.name & form 객체 활용 

import { useState } from "react"

const EventPrac = () => {

    const [form, setForm] = useState({username: '', message: ''});

    const {username, message} = form;

    const onChange = event => {

        const nextForm = {

            ...form,

            [event.target.name]: event.target.value

        };

        setForm(nextForm);

    };

    const onClick = () => {

        alert(username + ': '+ message);

        setForm({

            username: '',

            message: ''

        });

    };

    const onKeyDown = event => {

        if (event.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}

                onKeyDown={onKeyDown}

            />

            <button onClick={onClick}>확인</button>

        </div>

    );

};

export default EventPrac;