react-shop-web/front & back

Select Option 처리하기

tjdvyzl 2023. 1. 14. 20:29
import React, { useState } from 'react'
import {Typography, Button, Form, Input} from 'antd';

const { Title } = Typography;
const { TextArea } = Input;

const Continents = [
    { key: 1, value: "Africa" },
    { key: 2, value: "Europe" },
    { key: 3, value: "Asia" },
    { key: 4, value: "North America" },
    { key: 5, value: "South America" },
    { key: 6, value: "Australia" },
    { key: 7, value: "Antarctica" }
]

function UploadProductPage() {

  const [Name, setName] = useState("");
  const [Description, setDescription] = useState("");
  const [Price, setPrice] = useState(0);
  const [Continent, setContinent] = useState(1);
  const [Images, setImages] = useState([]);

  const NameChangeHandler = (e) => {
    setName(e.currentTarget.value)
  }

  const DescriptionChangeHandler = (e) => {
    setDescription(e.currentTarget.value)
  }

  const PriceChangeHandler = (e) => {
    setPrice(e.currentTarget.value)
  }

  const continentChangeHandler = (e) => {
    setContinent(e.currentTarget.value)
  }

  return (
    <div style={{ maxWidth: '700px', margin: '2rem auto' }}>
      <div style={{ textAlign: 'center', marginBottom: '2rem' }}>
        <Title level={2}>여행 상품 업로드</Title>
      </div>
      
      <Form>
        {/* DropZone */}
        <br />
        <br/>
        <label>이름</label>
        <Input onChange={NameChangeHandler} value={Name} />
        <br />
        <br />
        <label onChange={DescriptionChangeHandler} value={Description}>설명</label>
        <TextArea/>
        <br />
        <br />
        <label>가격($)</label>
        {/* Input같은 경우 onChange를 할 때 value값이 바뀌도록 해주는 것이다. */}
        <Input type="number" onChange={PriceChangeHandler} value={Price} />
        <br />
        <br />
        {/* select같은 경우 onChagne를 할 때 option들이 변화 될 때 select의 value가 바뀔 수 있도록 해줌  */}
        <select onChange={continentChangeHandler} value={Continent}>
          {/* <option></option> 태그를 여러개 사용해서 구현해도 되지만 map이라는 method를 이용해서 쉽게 구현할 수 있다*/}
          {Continents.map(item => (
            <option key={item.key} value={item.key}>{item.value}</option>
          ))}
        </select>
        <br />
        <br />
        <Button>확인</Button>
      </Form>


    </div>
  )
}

export default UploadProductPage

UploadProductPage.js