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