Получить текст выбранного варианта в React.js?

Question

Проблема с получением текста выбранного элемента в select-компоненте

Я создаю свой компонент для выпадающего списка, который рендерит элементы select следующим образом:

<form className="pure-form">
    <select ref="selectMark" className="mark-selector" onChange={this.onChange}>
        {this.getOptions()}
    </select>
</form>

У меня есть метод в компоненте, который создает элементы option:

getOptions: function () {
    return this.props.renderProps.data.map(function (item) {
        return <option key={item.value} value={item.value}>{item.label}</option>;
    }.bind(this));
},

Мой метод onChange работает корректно, и я получаю значение выбранного элемента:

onChange: function(event) {
    var newValue = event.nativeEvent.target.value;
    this.props.renderProps.onSaveCare(newValue);
    this.setState({value: newValue});
    this.toggleEdit();
},

Однако мне нужно получить текст выбранного элемента, и когда я пытаюсь использовать следующий код, он возвращает undefined:

event.nativeEvent.target.text; // undefined

Как я могу получить текст выбранной опции?

Answer 1

Вы можете использовать следующий код для получения текста выбранного элемента в выпадающем списке:

var index = event.nativeEvent.target.selectedIndex;
var selectedText = event.nativeEvent.target.options[index].text;

Этот код получает индекс выбранного элемента с помощью свойства selectedIndex, а затем использует его для доступа к соответствующему элементу options, чтобы получить текст.

Вот ссылка на демонстрацию: http://jsbin.com/vumune/4/.

Answer 2

Вы можете получить текст выбранного варианта, заменив следующую строку:

event.nativeEvent.target.text;

на эту:

event.target.options[event.target.selectedIndex].text;

Это позволит вам корректно использовать индекс выбранного элемента для получения его текста.

Answer 3

Если это элемент с одиночным выбором, вот более простой способ:

e.target.selectedOptions[0].text

Answer 4

Это сработало для меня:

const { options, value } = e.target;
console.log(options[value].innerHTML);

Правка: Я только что понял, что использовал поле "value" для хранения идентификаторов некоторых объектов, от 0 до n. Думаю, лучше было бы воспользоваться следующим подходом:

const { options, selectedIndex } = e.target;
console.log(options[selectedIndex].innerHTML);

Это позволит получать содержимое выбранного элемента гораздо нагляднее.

Answer 5

Это просто, используя рефы.

Импортируйте хук:

import React, { useContext, useState, useEffect, useRef } from "react";

Создайте его экземпляр:

const yourNewRef = useRef();

Затем прикрепите его к вашему элементу:

ref={yourNewRef}

Теперь вы можете получить доступ к нему в любом событии или функции, просто вызвав:

let textSelectOption = yourNewRef.current.options[yourNewRef.current.selectedIndex].text;

Чтобы получить значение, вы можете просто вызвать:

let optionValue = yourNewRef.current.value;

Рефы замечательны, с их помощью вы можете сделать почти все, что могли бы сделать с помощью jQuery. Посмотрите на ваш реф в консоли и получите доступ ко всем его содержимым через свойство .current.

Получить текст выбранного варианта в React.js?

5 ответ(ов)

Руководство по Markdown

Форматирование текста

Код

Списки

Поддерживаемые языки программирования

Популярные

Другие .NET

Базы данных