Daily Coding - FE 3주차 - 28강

28강

Input type

Button / Checkbox / Color / Date / File / Number / Text / Password / Radio / Submit / Range 등이 있음.

 

객체인 state 다룰 때는 하기와 같은 방식으로 사용한다.

setState(prevState => {...prevState});

 

input의 값은 => value

input의 이벤트 감지 => onChange

 

import React, { useState } from 'react';
import './PaymentForm.css';

const PaymentForm = () => {

//state를 개별로 관리하는 방법
  const [name, setName] = useState('');
  const [price, setPrice] = useState(0);
  const [date, setDate] = useState(null);

  const inputTypeNameChangeHandler = (event) => {
    setName(event.target.value)
  };
  const inputTypeNumberChangeHandler = (event) => {
    setPrice(event.target.value)
  };
  const inputTypeDateChangeHandler = (event) => {
    setDate(event.target.value)
  };
  
  const btnSubmitHandler = () => {
    console.log('name', name);
    console.log('price', price);
    console.log('date', date);
  }

//state 여러개를 관리하는 방법
  const [objectState, setObjectState] = useState({
    name: '',
    price: 0,
    date: null
  });

  const inputTypeNameChangeHandler = (event) => {
    setObjectState(prevState => ({...prevState, name: event.target.value}))
  };
  const inputTypeNumberChangeHandler = (event) => {
    setObjectState(prevState => ({...prevState, price: event.target.value}))
  };
  const inputTypeDateChangeHandler = (event) => {
    setObjectState(prevState => ({...prevState, date: event.target.value}))
  };

    const btnSubmitHandler = () => {
    console.log('name', objectState.name);
    console.log('price', objectState.price);
    console.log('date', objectState.date);
  }

  return (
    <form>
      <div className='new-payment__controls'>
        <div className='new-payment__control'>
          <label>이름</label>
          <input type='text' value={objectState.name} onChange={inputTypeNameChangeHandler}/>
        </div>
        <div className='new-payment__control'>
          <label>금액</label>
          <input type='number' min='0.01' step='0.01' value={objectState.price} onChange={inputTypeNumberChangeHandler}/>
        </div>
        <div className='new-payment__control'>
          <label>날짜</label>
          <input type='date' min='2019-01-01' max='2022-12-31' value={objectState.date} onChange={inputTypeDateChangeHandler}/>
        </div>
      </div>
      <div className='new-payment__actions'>
        <button type='button' onClick={btnSubmitHandler}>결제 추가</button>
      </div>
    </form>
  );
};

export default PaymentForm;