Javascript 使用react js获取选定的选项文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30306486/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get selected option text using react js?
提问by Bomber
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
回答by Dhiraj
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/
回答by Sean M
You can get the option text by replacing this:
您可以通过替换以下内容来获取选项文本：
event.nativeEvent.target.text;
with this:
有了这个：
event.target.options[event.target.selectedIndex].text
回答by Alber_h
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. I guess a better approach could be the following:
编辑：我刚刚意识到我正在使用“值”字段来存储一些对象的 ID，从 0 到 n。我想更好的方法可能如下：
const {options, selectedIndex} = e.target;
console.log(options[selectedIndex].innerHTML);
回答by Alexandre Kirszenberg
The text of an option is simply the labelproperty of the corresponding item.
选项的文本只是label相应item.
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.findis part of the ES6 proposal. Underscore or lodash already package it as the _.findmethod.
Array.prototype.find是 ES6 提案的一部分。Underscore 或 lodash 已经将其打包为_.findmethod。
回答by user2091375
If it's single select, here is more simple way:
如果是单选，这里有更简单的方法：
e.target.selectedOptions[0].text
e.target.selectedOptions[0].text
回答by Dinesh Katwal
Here what i do to retrieve the text from select option in react js.
在这里，我如何从 react js 中的选择选项中检索文本。
this.refs.selectMark[this.refs.selectMark.value].text
回答by Govani Dhruv Vijaykumar
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)
}
回答by muhammad osama
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) )
}
回答by muhammad osama
make your dropdown accordingly and get value on change event like
相应地制作您的下拉菜单并获得更改事件的价值，例如
onChange = {(e,index) =>
( setAddressChangeType(e.target.value), console.log(index.props.id) )
}
