獲取下拉的文本沒有價值（選擇）輸入與之反應

Question

使用反應我可以通過target.value

然而

在我目前的情況下，我想這兩個值作爲其各種各樣的ID和搶所選元素的值期權的面值。我如何通過反應來獲取？這是否合理？

通過面值我的意思是在<option value='123'> TEXT </option>之間

我希望能夠獲得「TEXT」

Answer 1

我會使用常規的JavaScript函數只是給這個選擇框的ID，並抓住這個值的話附加到您的點擊處理程序或您希望在React組件中執行的任何功能。

//常規的JavaScript方式

var yourElement = document.getElementById(elementId); 

    if (yourElement.selectedIndex == -1) 
     return null; 

    return yourElement.options[yourElement.selectedIndex].text; 

Answer 2

event.target給你HTMLSelectElement，從那裏您可以訪問其他一些東西，如HTMLSelectElement.selectedOptions。

From MDN：

HTMLSelectElement.selectedOptions（只讀）

返回包含被選擇的組選項現場的HTMLCollection。

所以，從那裏你可以得到HTMLOptionElement和text

把它放在一起，你就會有這樣的事情：

var selectedOption = e.target.selectedOptions[0]; 
console.log(selectedOption.value); // 123 
console.log(selectedOption.text); // TEXT