비디오 업로드 만들기 2

state를 만들건데 현재 VideoUploadPage를 보게 되면 onChage나 value 이런 것이 있는데

 

이를 state로 만들고 한번에 서버로 보낼 것이다. 

    const [VideoTitle, setTitle] = useState("")

 

이렇게 선언을 해주고 

 

 

    const [Description, setDescription] = useState("")

선언하고 

 

    const [Private, setPrivate] = useState(0)

    const [Category, setCategory] = useState("Film & Animation")

 

이렇게 두개 선언해주고 

 

option에 대해서

   <select onChange>

                <option>key value</option>    

  </select>

이렇게 있을때 

                <option>key value</option>   두번 선언해서 해도 되지만

 map을 이용해서 할 것입니다. 

 

그걸 하기에 앞서서

const PrivateOptions =[

    {value: 0, label: "Private"},

    {value: 1, label: "Public"}   

]

이렇게 선언해주고

이부분에서 

            <select onChange>

                {PrivateOptions.map((item,index)=>(

                    <option key={index} value={item.value}>{item.label}</option>

                ))}

 

                <option>key value</option>    

            </select>

 

이것이

            <select onChange>

                 <option>key value</option>    

                <option>key value</option>    

            </select>

같지만 전자를 써주는것이 좋다.

 

const CategoryOptions =[

    {value: 0, label: "Film & Animation "},

    {value: 1, label: "Autos & Vehicles"},

    {value: 2, label: "Music"},

    {value: 3, label: "Pet & Animals"}     

]

 

선언해주고

카테고리 부분의 옵션으로 가서 

 <select onChange>

                {CategoryOptions.map((item,index)=>(

                 <option key={index} value={item.value}>{item.label}</option>

                ))}

 

            </select>

 

 

이렇게 해주고 어떻게 화면이 구성되는지 봐봅시다.

import React, {useState} from 'react'

혹시나 useState가 안먹힌다면 위에 이렇게 선언이 되어 있는지 확인 해봅시다. 

우선 그렇게 되면 아래와 같이 나옵니다. 

 

 

이제는 onChange 부분을 구현할 것입니다. 

 

 

이부분을 구현 할 것 입니다. 

 

 

이렇게 해주시고,

 

    const onTitleChange = (e) =>{

        setVideoTitle(e.currentTarget.value)

    }

    const onDescriptionChange = (e) =>{

        setDescription(e.currentTarget.value)

    }

 

이렇게 선언하면 안에 내용을 쓸 수 있다. 

 

우선 1차적인 소스 입니다.

import React, {useState} from 'react'
import Dropzone from 'react-dropzone';
import {Typography, Button, Form, Message, Input, Icon} from 'antd';

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

const PrivateOptions =[
    {value: 0, label: "Private"},
    {value: 1, label: "Public"}   
]
const CategoryOptions =[
    {value: 0, label: "Film & Animation "},
    {value: 1, label: "Autos & Vehicles"},
    {value: 2, label: "Music"},
    {value: 3, label: "Pet & Animals"}     
]

function VideoUploadPage() {

    const [VideoTitle, setVideoTitle] = useState("")
    const [Description, setDescription] = useState("")
    const [Private, setPrivate] = useState(0)
    const [Category, setCategory] = useState("Film & Animation")

    const onTitleChange = (e) =>{
        setVideoTitle(e.currentTarget.value)
    }
    const onDescriptionChange = (e) =>{
        setDescription(e.currentTarget.value)
    }
    return (
        <div style={{maxWidth:'700px',margin:'2rem auto'}}>
            <div style={{textAlign:'center',marginBottom:'2rem'}}>
                <Title level={2}>Upload Video</Title>
            </div>
            <Form onSubmit>
                <div style={{display:'flex',justifyContent:'space-between'}}>
                 {/*Drop zone*/}
                    <Dropzone
                    onDrop
                    multiple
                    maxSize
                    >
                    {({getRootProps, getInputProps})=>(
                            <div style={{width:'300px', height:'240px', border:'1px solid lightgray',display :'flex',
                            alignItems:'center',justifyContent:'center'}}{...getRootProps()}>
                                <input{...getInputProps()}/>
                                <Icon type="plus" style={{fontSize:'3rem'}}/>
                            </div>
                    )}

                    </Dropzone>
                 {/*Thumbnail*/}
                 <div>
                     <img src alt/>
                 </div>
                </div>
            <br/>
            <br/>
            <label>Title</label>
            <Input
                onChange = {onTitleChange}
                value = {VideoTitle}
            />
            <br/>
            <br/>
            <label>Description</label>
            <TextArea
                onChange = {onDescriptionChange}
                value ={Description}
            />
            <br/>
            <br/>
            <select onChange>
                {PrivateOptions.map((item,index)=>(
                    <option key={index} value={item.value}>{item.label}</option>
                ))}
            </select>
            <br/>
            <br/>
            <select onChange>
                {CategoryOptions.map((item,index)=>(
                 <option key={index} value={item.value}>{item.label}</option>
                ))}

            </select>
            <br/>
            <br/>
            <Button type="primary" size="large" onClick>
                Submit
            </Button>

            </Form>
        </div>
    )
}

export default VideoUploadPage

 

 

그리고 

두개의 onChage에 대해서도 선언을 하겠습니다. 

이렇게 해줍니다. 

 const onPrivateChange = (e) =>{

        setPrivate(e.currentTarget.value)

    }

    const onCategoryChange = (e) =>{

        setCategory(e.currentTarget.value)

    }

 

 

이렇게 선언해주면 됩니다. 

 

우선 여기까지 하고 다음에는 드롭존에 넣었을때 이벤트가 발생하는 부분을 구현합니다.