使用react js获取选定的选项文本？

IT技术 javascript reactjs
2021-04-04 17:42:11

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

<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
6个回答

这样的事情应该做

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

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

上帝祝福你！！
2021-05-25 17:42:11
嗨@Dhiraj，它也与 event.target.value 一起工作，那么为什么在上面？
2021-05-29 17:42:11
@user10742206：如果其他东西被分配给“值”，那么它很有用。
2021-05-29 17:42:11

您可以通过替换以下内容来获取选项文本：

event.nativeEvent.target.text;

有了这个：

event.target.options[event.target.selectedIndex].text
完美的答案。谢谢你。
2021-06-16 17:42:11

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

e.target.selectedOptions[0].text

与 Vue 合作！
2021-05-25 17:42:11

这对我有用

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

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

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

选项的文本只是label相应item.

在您的情况下，要检索所选选项的文本，您可以执行以下操作：

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

Array.prototype.find是 ES6 提案的一部分。Underscore 或 lodash 已经将其打包为_.findmethod。

其它你可能感兴趣的问题
上一篇ReactJS - 从另一个组件调用一个组件方法 下一篇如何在react js中从一个页面导航到另一个页面？