要傳資料到後台前，還有兩個值要抓取 — 分類與圖片，圖片的部分之後做，今天要先處理分類的資料。

DAY14時將分類做成了一個元件Continent，再將Continent子元件引入NewPost編輯頁面，但選好的option資料只存在Continent頁面，NewPost是沒有這一項資料的，所以今天要先做的是將選取好分類後的資料傳入編輯頁面，這樣在編輯頁面按下送出按鈕的時候才能一併把分類傳入資料庫(子元件資料傳父元件)。

首先在Continent.js子元件中建立一個newContient的函式，在select改變時執行

function Continent(props){
    //略
    function newContient(e){
        props.parentCallback(e.target.value)
        e.preventDefault();
    }
    return(
        <select name="continent" id="continent" required onChange={newContient}>
            {
                continent.map(option=>{
                    return <option value={option.value} key={option.value}>{option.content}</option>
                })
            }
        </select>
    )
}

export default Continent

父元件NewPost.js則是要接收資料，利用parentCallback={handleCallback}把子元件資料送給setContinent，這樣在表單送出時區域也會有資料可以傳入。

function NewPost(){
    //略
    const [continent, setContinent] = useState("")
   
    function handleCallback(childData){
        setContinent(childData)
    }
    return(
			//略
        <div className="form-group">
            <label className="form-label" htmlFor="continent">區域<span>*</span></label>
            <Continent parentCallback={handleCallback}/>
            <small>{continent ? "":"必填"}</small>
        </div>
    )
}

export default NewPost

值抓到啦! 那明天就是先送送看資料，希望也能像今天依樣順利。