React JS - Захват выбранных элементов из поля SELECT Multiple

Я использую форму, в которой администратор может создать класс и добавить учеников в класс. Я использую SELECT multiple, чтобы администратор мог выбрать несколько учеников. Мой вопрос заключается в том, как я могу захватить выбранный диапазон и экспортировать его в список. Я пытался использовать набор данных, но безуспешно.

function ClassesCreate(props) {
    const [token, setToken] = useState("");
    const [hasToken, setHasToken] = useState("");

    useEffect(() => {
        if(localStorage.getItem("token")){
          setToken(localStorage.getItem("token"));
            setHasToken(true);
            }
    }, []);

    function createClasses(){
            let login_token = localStorage.getItem("token")

        let data={
            class_number:document.getElementById("ClassNumber").value,
            course:document.getElementById("Course").value,
            semester:document.getElementById("Semester").value,
            lecturer:document.getElementById("Lecturer").value,
            student:document.getElementById("Student").dataset
        }

        axios.post(BaseUrl+"attendance/classes_viewset/", data, {headers:{
            "Authorization": "Token "+login_token
            }}).then(response=>{
                alert("Create successful")
        }).catch(error=>{
            console.log(error)
        })
    }

    return (
        <div>
            <p>Class Number: <input type={"text"}  id={"ClassNumber"}/> </p>
            <p>
                Course:
                <select id={"Course"}>
                <Course/>
                </select>
            </p>
            <p>
                Semester:
                <select id={"Semester"}>
                <Semester/>

                </select>
            </p>
            <p>
                Lecturer:
                <select id={"Lecturer"}>
                <Lecturer/>

                </select>
            </p>
            <p>
                Students:
                <select id={"Student"} multiple >
                <Student/>

                </select>
            </p>
            <p>
                <button className={"btn btn-danger"} onClick={createClasses}>Create</button>
            </p>

        </div>
    );
}

export default ClassesCreate;

ВСТУПЛЕНИЕ/ЗАКЛЮЧЕНИЕ из браузера

AxiosError {message: 'Request failed with status code 400', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
code
: 
"ERR_BAD_REQUEST"
config
: 
{transitional: {…}, adapter: Array(2), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}
message
: 
"Request failed with status code 400"
name
: 
"AxiosError"
request
: 
XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
response
: 
config
: 
{transitional: {…}, adapter: Array(2), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}
data
: 
{student: Array(1)}
headers
: 
AxiosHeaders {content-length: '43', content-type: 'application/json'}
request
: 
XMLHttpRequest
onabort
: 
ƒ handleAbort()
onerror
: 
ƒ handleError()
onload
: 
null
onloadend
: 
ƒ onloadend()
onloadstart
: 
null
onprogress
: 
null
onreadystatechange
: 
null
ontimeout
: 
ƒ handleTimeout()
readyState
: 
4
response
: 
"{\"student\":[\"This list may not be empty.\"]}"
responseText
: 
"{\"student\":[\"This list may not be empty.\"]}"
responseType
: 
""
responseURL
: 
"http://127.0.0.1:8000/attendance/classes_viewset/"
responseXML
: 
null
status
: 
400
statusText
: 
"Bad Request"
timeout
: 
0
upload
: 
XMLHttpRequestUpload {onloadstart: null, onprogress: null, onabort: null, onerror: null, onload: null, …}
withCredentials
: 
false
[[Prototype]]
: 
XMLHttpRequest
status
: 
400
statusText
: 
"Bad Request"
[[Prototype]]
: 
Object
stack
: 
"AxiosError: Request failed with status code 400\n    at settle (http://localhost:3000/static/js/bundle.js:64856:12)\n    at XMLHttpRequest.onloadend (http://localhost:3000/static/js/bundle.js:63570:66)"
[[Prototype]]
: 
Error

Я пытался использовать набор данных для получения списка, но безуспешно.

Вернуться на верх