×
Crocus
공부한 내용을 정리하는 블로그로 시작한
Crocus는 2014년 1월 14일 부터 시작하여
현재 월 6만명, 총 2,045,673명의 방문자 수를 기록하고 있습니다.
Donation
이제 많은 사용자들이 이용하는 만큼
더 다양한 서비스 개발/제공을 위해 후원금을 모금하고자 합니다.
후원을 해주시는 분들은 Donators 명단에 성명, 후원금을 기입해드리며
Crocus 블로그가 아닌 다른 곳에 정리해둔 저만의 내용을 공유해 드리고자 합니다.
Account
예금주 : 고관우
신한은행 : 110-334-866541
카카오뱅크 : 3333-01-7888060

👉 후원 페이지 바로가기 Donators
익명 : 5000원(Crocus응원합니다.)
busyhuman: 5000원(유용한 지식 감사합니다.)
익명 : 5000원(알고리즘 학습러)
반응형
import React, { useState } from 'react'

const InputSample = () => {
    const [inputs, setInputs] = useState({
        name: '',
        nickname: ''
    });

    const { name, nickname } = inputs;

    const onChange = (e) => {
        const {value, name} = e.target;
        console.log("name :: " , name , " [name] :: " , [name], " value : ", value);
        setInputs({
            ...inputs,
            [name]: value
        });
    }
    
    const onReset = () => {
        setInputs({
            name: '',
            nickname: '',
        })
    };
    return (
        <>
            <input name="name" placeholder="이름" onChange={onChange} value={name}/>
            <input name="nickname" placeholder="닉네임" onChange={onChange} value={nickname}/>

            <button onClick={onReset}>초기화</button>
            <div>
                <b>값: </b>
                {name}({nickname})
            </div>
        </>
    );
}

export default InputSample;

 

onChange1, onChange2를 만들어 name과 nickname 두개를 컨트롤 해도 되지만,

input에 name을 설정함으로써 하나의 onChange에서 모든 input의 value를 control할 수 있는 방법이다.

반응형