React - redux ) 여러개의 Input 관리하기

/* eslint-disable no-shadow */
/* eslint-disable no-unused-vars */
import React, { useRef, useState } from 'react';

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

  const { name, nickname } = inputs;

  const onChange = (e) => {
    const { value, name } = e.target;
    setInputs({
      ...inputs,
      [name]: value,
    });
  };

  const onReset = () => {
    setInputs({
      name: '',
      nickname: '',
    });
    nameInput.current.focus();
  };

  return (
    <div>
      <input name="name" placeholder="이름" onChange={onChange} value={name} ref={nameInput} />
      <input name="nickname" placeholder="닉네임" onChange={onChange} value={nickname} />
      <button onClick={onReset} type="button">초기화</button>
      <div>
        <b>
          값 :
        </b>
        {name}
        {' '}
        : (
        {nickname}
        )
      </div>
    </div>
  );
}

export default InputSample;

 

 

여러개의 input 을 관리해보자

이런식으로 되게끔...

 

useInput hooks를 만들어서 쓰게 되겠지만..!

 

오늘은 useState에 두가지 경우를 넣어보았다.

 

 

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

  const onChange = (e) => {
    const { value, name } = e.target;
    setInputs({
      ...inputs,
      [name]: value,  // name 키를 가진 값을 value 로 설정
    });
  };

 

음... 그렇군...

 

const nextInputs = {
            //spread 문법. 현재 상태의 내용이 이 자리로 온다. 
            ...inputs,
            name:value,
        };

이렇게 하면 문자열 name 자체가 들어가고

[name]:value

해주면 input 에 적어준 name값에 따라 key값이 변경됨.

 

<input name="name" placeholder="이름" onChange={onChange} value={name} ref={nameInput} />
<input name="nickname" placeholder="닉네임" onChange={onChange} value={nickname} />

처리는 이렇게...

 

 

그런 다음에 한번에 초기화 하는걸 보겠다.

 

 

  const nameInput = useRef();


  const onReset = () => {
    setInputs({
      name: '',
      nickname: '',
    });
    nameInput.current.focus();
  };

 

<button onClick={onReset} type="button">초기화</button>

 

클릭했을 때 이렇게 동작하게.. 

둘다 빈 값으로 처리해주고

nameInput에 focus 가게끔 한다.

 

 

useRef 로 특정 DOM 선택하기