Получение массива значений из формы реагирования выбора

Question

Итак, в основном я пытаюсь создать форму с выпадающим списком выбора.Я пытаюсь отправить массив значений в функцию onChange через свойство value, но вместо этого он просто дает мне строку.Как я могу передать значения обратно и получить к ним доступ в стиле массива?

Сайт activjs показывает, что это возможно при выбранном теге, но не при доступе к значениям ...

https://reactjs.org/docs/forms.html#the-select-tag

    <Input type="select" name="university" id="university" onChange={this.onSelect}>

    {this.props.universities.universities.map(({ idUniversity, name}) => (
       <option key ={idUniversity} value = {[idUniversity , name]}>
         {name}
       </option>
    ))}

    </Input>

    onSelect = (e) => {
        console.log(e.target.value[0] + " " + e.target.value[1] );
        this.setState({
            university_id: e.target.value[0],
            university_name: e.target.value[1]
        });
    }

Когда я запускаю это, e.target.value [0] дает мне первый символ всей строки, заданной {[idUniversity, name]}.

Так, например, массив должен быть [2, Университет Центральной Флориды], но e.target.value [0] вернет просто [

Answer 1

В этом ответе есть несколько возможных способов сделать это, используя index, чтобы выбрать элементы из ваших исходных данных, однако в вашем случае может быть просто проще split вернуть значение обратно вформа массива:

onSelect = (e) => {
    const [university_id, university_name] = e.target.value.split(',');

    this.setState({
        university_id,
        university_name,
    });
}

Answer 2

Вы можете получить значения опций элемента select примерно так:

const selectElement = document.querySelector('select');
const options = Array.from(selectElement.children);
const values = options.map(option => option.value);

Если вы используете реагировать, вы должны использовать ref вместо document.querySelector.