[英]Get selected option text using react js?
I have my select list component rendering my select list:我有我的选择列表组件呈现我的选择列表:
<form className="pure-form">
<select ref="selectMark" className="mark-selector"
onChange={this.onChange}>{this.getOptions()}
</select>
</form>
I have a method on the component to create the options:我在组件上有一个方法来创建选项:
getOptions: function () {
return this.props.renderProps.data.map(function (item) {
return <option key={item.value} value={item.value}>{item.label}</option>;
}.bind(this));
},
My onChange method works fine with the value:我的 onChange 方法适用于该值:
onChange: function(event) {
var newValue = event.nativeEvent.target.value;
this.props.renderProps.onSaveCare(newValue);
this.setState({value: newValue});
this.toggleEdit();
},
Is there a way I can get the option text?有没有办法获得选项文本? This gives me undefined
这给了我未定义的
event.nativeEvent.target.text; //undefined
Something like this should do这样的事情应该做
var index = event.nativeEvent.target.selectedIndex;
event.nativeEvent.target[index].text
Here is a demo http://jsbin.com/vumune/4/这是一个演示http://jsbin.com/vumune/4/
You can get the option text by replacing this:您可以通过替换以下内容来获取选项文本:
event.nativeEvent.target.text;
with this:有了这个:
event.target.options[event.target.selectedIndex].text
This worked for me这对我有用
const {options, value} = e.target;
console.log(options[value].innerHTML);
Edit: I just realized I was using the "value" field to store the ID of some objects, from 0 to n.编辑:我刚刚意识到我正在使用“值”字段来存储一些对象的 ID,从 0 到 n。 I guess a better approach could be the following:
我想更好的方法可能如下:
const {options, selectedIndex} = e.target;
console.log(options[selectedIndex].innerHTML);
如果是单选,这里有更简单的方法:
e.target.selectedOptions[0].text
The text of an option is simply the label
property of the corresponding item
.选项的文本只是相应
item
的label
属性。
In your case, to retrieve the text of the selected option, you can do:在您的情况下,要检索所选选项的文本,您可以执行以下操作:
var selectedItem = this.props.renderProps.data.find(function (item) {
return item.value === event.target.value;
});
selectedItem.label;
Array.prototype.find
is part of the ES6 proposal. Array.prototype.find
是 ES6 提案的一部分。 Underscore or lodash already package it as the _.find
method . Underscore 或 lodash 已经将其打包为
_.find
方法。
在这里,我如何从 react js 中的选择选项中检索文本。
this.refs.selectMark[this.refs.selectMark.value].text
2020 and this Worked For Me 2020 年,这对我有用
My Select Element :我的选择元素:
<FormGroup>
{<Select
closeMenuOnSelect={true}
components={animatedComponents}
options={Options}
value = "Ahmedabad"
onChange={this.handleChange}
name = "citySelect"
/>}
</FormGroup>
Call handler :呼叫处理程序:
handleChange = (e) => {
console.log(e.value)
}
change your menu item accordingly相应地更改您的菜单项
Current / Temporary address Permanent address Office / Business Address当前/临时地址 永久地址 办公室/营业地址
and on change event get并在更改事件中获取
onChange = {(e,index) =>
( setAddressChangeType(e.target.value), console.log(index.props.id) )
}
make your dropdown accordingly and get value on change event like相应地制作您的下拉菜单并获得更改事件的价值,例如
onChange = {(e,index) =>
( setAddressChangeType(e.target.value), console.log(index.props.id) )
}
It's easy using refs.使用 refs 很容易。
import the hook导入钩子
import React, { useContext, useState, useEffect, useRef } from "react";
instantiate it实例化它
const yourNewRef= useRef();
Reference it in your element在您的元素中引用它
ref={yourNewRef}
Then you can access it in any event or function by simply calling:然后您可以通过简单地调用在任何事件或函数中访问它:
let textSelectOption = yourNewRef.current.options[yourNewRef.current.selectedIndex].text
You can access the value simply by calling您可以通过调用简单地访问该值
let optionValue = yourNewRef.current.value
refs are great, you can do almost everything you would using jQuery. refs 很棒,你可以做几乎所有你会使用 jQuery 的事情。 Take a look at yourNewRef on console and access all the content via the .current property
在控制台上查看 yourNewRef 并通过 .current 属性访问所有内容
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.