使用 React 获取文本而不是下拉（选择）输入的值答案

【问题标题】：Get Text not Value of Dropdown (Select) input with React使用 React 获取文本而不是下拉（选择）输入的值
【发布时间】：2016-03-08 15:50:17
【问题描述】：

使用 react 我可以通过 target.value 获取所选元素的值

但是，在我目前的情况下，我希望将值作为其 ID 和选项的面值。我如何通过反应抓住它？这合理吗？

面值是指<option value='123'> TEXT </option>之间的单词

我希望能够得到“TEXT”

【问题讨论】：

标签： javascript html validation dom reactjs

【解决方案1】：

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

【讨论】：

【解决方案2】：

我会给这个选择框一个 id 并使用附加到点击处理程序的普通 JavaScript 函数或你想在 React 组件中执行的任何函数来获取这个值。

//常规的javascript方式

var yourElement = document.getElementById(elementId);

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

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

【讨论】：