Как получить выбранную опцию в React. js, а не jQuery или в любом другом фреймворке?

Question

Я использовал способ, который упоминался на странице ( идентификатор выбранной опции ), но в React. js Я боролся таким образом, но this не определено. Как получить идентификатор выбранной опции?

<select id="my_select" onchange={() => handleChange(this)}>
   <option value="o1" id="id1">Option1</option>
   <option value="o2" id="id2">Option2</option>
</select>

А вот моя функция onChange():

const handleChange = (obj) => {
    console.log("What is this?", obj); // --> undefined

};

Как получить идентификатор выбранной опции?

Answer 1

Прежде всего, имейте в виду, что вы можете передать ключевое слово this в качестве параметра вашей функции. как это (также есть опечатка в предоставленном вами коде, где onchage должно быть onChange, поскольку вы используете здесь элементы реагирования):

<select id="my_select" onChange={() => handleChange(this)}>
   ...
</select>

Но вы не можете использовать ключевое слово this как ваш входной параметр в вашей фактической функции.

const handleChange = (this) => { // This will throw an error (Binding invalid left-hand side ...)
  ...
};

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

const handleChange = (param) => {
  console.log("What is this?", param); // Represent the window element
};

Сделайте это, дайте нам значение опции выбора?

Краткий ответ: нет , но почему?

Поскольку мы определяем функцию handleChange в нашей глобальной области действия (а также объявляем функции стрелок для onChange и handleChange) , это даст нам фактический window элемент , который бесполезен для получения значения select.

---

Каков наилучший способ сделать это тогда?

Чтобы получить фактическое значение выбранной опции вы можете сделать это просто используя интерфейс event, например:

<select id="my_select" onChange={(event) => handleChange(event)}>
   ...
</select>

const handleChange = (event) => {
   console.log("What is this?", event.target.value); // Represent the actual value of selected option
};

ПРИМЕЧАНИЕ: Подробнее о event interface можно прочитать здесь .

---

ОБНОВЛЕНИЕ

Поскольку вы хотели получить доступ к идентификатору выбранной опции, вы можете просто добиться этого, используя свойство event.target.selectedOptions, которое предоставляет список целых выбранных элементов опции, как это :

const handleChange = (event) => {
   console.log("What is this?", event.target.selectedOptions[0].id); // Represent the actual id of selected option
};

ПРИМЕЧАНИЕ: Поскольку event.target.selectedOptions предоставит массив элементов, поэтому вам нужно получить доступ к первому с помощью event.target.selectedOptions[0] и получить атрибут, который вы хотели просто Точечная запись.

Рабочий пример для this и event: