获取下拉的文本没有价值（选择）输入与之反应

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