Question

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

<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

Answer 1

这样的事情应该做

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

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

Answer 2

您可以通过替换此选项来获取选项文本：

event.nativeEvent.target.text;

用这个：

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

Answer 3

这对我有用

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

编辑：我刚刚意识到我正在使用＆＃34;值＆＃34;字段，用于存储某些对象的ID，从0到n。我想更好的方法可能如下：

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

Answer 4

选项的文字只是相应label的{{1}}属性。

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

item

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

Answer 5

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

e.target.selectedOptions[0].text

Answer 6

这是我从反应js中的select选项中检索文本的方法。

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

Answer 7

2020年，这对我有用

我的选择元素：

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

呼叫处理程序：

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

Answer 8

相应地更改菜单项

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

并在发生更改事件时获取

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

Answer 9

相应地进行下拉菜单，并在诸如此类的更改事件中获得价值

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

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

9 个答案: