使用反应js获取选定的选项文本？答案

【问题标题】：Get selected option text using react js?使用反应js获取选定的选项文本？
【发布时间】：2015-07-30 03:38:06
【问题描述】：

我的选择列表组件呈现我的选择列表：

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

我在组件上有一个方法来创建选项：

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();
},

有没有办法获得选项文本？这给了我未定义的

event.nativeEvent.target.text; //undefined

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

应该这样做

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

这是一个演示http://jsbin.com/vumune/4/

【讨论】：

上帝保佑你！！
嗨@Dhiraj，它也与 event.target.value 一起工作，那么为什么上面呢？
@user10742206 ：如果其他东西被分配给“价值”，那么它是有用的。

【解决方案2】：

你可以通过替换得到选项文本：

event.nativeEvent.target.text;

用这个：

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

【讨论】：

完美答案。谢谢。

【解决方案3】：

如果是单选，这里有更简单的方法：

e.target.selectedOptions[0].text

【讨论】：

使用 Vue！

【解决方案4】：

这对我有用

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

编辑：我刚刚意识到我正在使用“值”字段来存储一些对象的 ID，从 0 到 n。我想更好的方法可能如下：

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

【讨论】：

【解决方案5】：

选项的文本只是对应item 的label 属性。

在您的情况下，要检索所选选项的文本，您可以这样做：

var selectedItem = this.props.renderProps.data.find(function (item) {
  return item.value === event.target.value;
});
selectedItem.label;

Array.prototype.find 是 ES6 提案的一部分。下划线或 lodash 已经将其打包为_.find method。

【讨论】：

【解决方案6】：

这是我从 react js 中的选择选项中检索文本的操作。

this.refs.selectMark[this.refs.selectMark.value].text

【讨论】：

【解决方案7】：

2020 年，这对我有用

我的选择元素：

          <FormGroup>
                  {<Select
                    closeMenuOnSelect={true}
                    components={animatedComponents}
                    options={Options}
                    value = "Ahmedabad"
                    onChange={this.handleChange}
                    name = "citySelect"
                  />}
          </FormGroup>

调用处理程序：

handleChange = (e) => {
    console.log(e.value)
}

【讨论】：

但是如果您需要将值作为数字并获取选项标签内的文本会发生什么？

【解决方案8】：

相应地更改您的菜单项

当前/临时地址永久地址办公室/公司地址

并在更改事件时获取

onChange = {(e,index)  =>
( setAddressChangeType(e.target.value),  console.log(index.props.id) )
}

【讨论】：

【解决方案9】：

相应地制作您的下拉菜单并获得更改事件的价值，例如

onChange = {(e,index)  =>
( setAddressChangeType(e.target.value),  console.log(index.props.id) )
}

【讨论】：

【解决方案10】：

使用 refs 很容易。

导入钩子

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

refs 很棒，你几乎可以用 jQuery 做任何事情。在控制台上查看 yourNewRef 并通过 .current 属性访问所有内容

【讨论】：