检索selectedOption.id的值。

Question

我希望能够使用 selectedOption 而只用 id 价值观。从本质上讲， selectedOption.id. 除了当我使用 selectedOption.id 我得到了未定义。

为什么会这样？我怎么做才能改变这种情况。我附上了一张图片作为参考，说明我说的是什么数据。这个 handleChange 功能发生在 Select 组件。

我的组件输出。

我的代码：

    import React, { useState } from 'react';
    import Select from 'react-select';

    export default function CandidateForm({ handleCreate, job_req_titles }) {
        const [name, setName] = useState('');
        const [email, setEmail] = useState('');
        const [phone, setPhone] = useState('');
        const [facebook, setFacebook] = useState('');
        const [github, setGithub] = useState('');
        const [linkedin, setLinkedin] = useState('');
        const [jobTitle, setJobTitle] = useState('');
        const [company, setCompany] = useState('');
        const [appJobReq, setAppJobReq] = useState('');

        const prepareCandidateObj = () => {
            // Prepare the candidate object
            let candidate = {
                name,
                email,
                phone,
                facebook,
                github,
                linkedin,
                jobTitle,
                company,
                appJobReq,
            };

            console.log(candidate);

            // Pass in the postNewCandidate from the parent component
            // to be called in this component
            handleCreate(candidate);
            // alert('Candidate Submitted!');
        };

        const handleChange = (selectedOption) => {
            setAppJobReq(selectedOption);
            console.log(`Option selected:`, selectedOption);
        };

        return (
            <div className='container'>
                <div className='row'>
                    <label className='name'>Name</label>
                </div>
                <div className='row'>
                    <input
                        className='name-input'
                        type='text'
                        placeholder='Carol Caroller'
                        value={name}
                        onChange={(e) => setName(e.target.value)}
                    />
                </div>
                <div className='row'>
                    <label className='email'>Email</label>
                </div>
                <div className='row'>
                    <input
                        className='email-input'
                        placeholder='[email protected]'
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                    />
                </div>
                <div className='row'>
                    <label className='phone'>Phone</label>
                </div>
                <div className='row'>
                    <input
                        className='phone-input'
                        placeholder='[phone]'
                        value={phone}
                        onChange={(e) => setPhone(e.target.value)}
                    />
                </div>
                <div className='row'>
                    <label className='facebook'>Facebook</label>
                </div>
                <div className='row'>
                    <input
                        className='facebook-input'
                        placeholder='https://www.facebook.com/DilaonRion/'
                        value={facebook}
                        onChange={(e) => setFacebook(e.target.value)}
                    ></input>
                </div>
                <div className='row'>
                    <label className='linkedin'>Linkedin</label>
                </div>
                <div className='row'>
                    <input
                        className='linkedin-input'
                        placeholder='https://www.linkedin.com/DillonRion/'
                        value={linkedin}
                        onChange={(e) => setLinkedin(e.target.value)}
                    ></input>
                </div>
                <div className='row'>
                    <label className='github'>Github</label>
                </div>
                <div className='row'>
                    <input
                        className='github-input'
                        placeholder='https://www.github.com/DilonRion/'
                        value={github}
                        onChange={(e) => setGithub(e.target.value)}
                    ></input>
                </div>
                <div className='row'>
                    <label className='job-title'>Job Title</label>
                </div>
                <div className='row'>
                    <input
                        className='job-title-input'
                        type='text'
                        placeholder='Frontend Developer'
                        value={jobTitle}
                        onChange={(e) => setJobTitle(e.target.value)}
                    ></input>
                </div>
                <div className='row'>
                    <label className='current-company'>Current Company Name</label>
                </div>
                <div className='row'>
                    <input
                        className='current-company-input'
                        type='text'
                        placeholder='Obrien LLC'
                        value={company}
                        onChange={(e) => setCompany(e.target.value)}
                    ></input>
                </div>
                <div className='row'>
                    <label className='job-req'>Applicant Job Req</label>
                </div>
                <div className='row'>

                    <div className='job-req-input'>
                        <Select
                            className='job-req-select'
                            value={appJobReq}
                            onChange={handleChange}
                            options={job_req_titles}
                            isMulti
                            classNamePrefix='select'
                        />
                    </div>
                </div>

                <div className='row'>
                    <label className='applied'>Applied or Sourced</label>
                    <select className='applied-input'>
                        <option disabled defaultValue>
                            --
                        </option>
                        <option value='1'>Applied</option>
                        <option value='0'>Sourced</option>
                    </select>
                </div>
                <button className='create-button' onClick={prepareCandidateObj}>
                    Create
                </button>
            </div>
        );
    }

Answer 1

由于 isMulti 递给 Select 组成部分。selectedOption 将是一个所选选项的数组。你可以使用数组 地图 方法获得一个数组，该数组只包含所选选项的id，假设每个选项都有一个id。

    const handleChange = (selectedOptions) => {
        const selectedOptionIds = selectedOptions.map(option => option.id)
        console.log("selected option ids:", 
    };