反应事件当前目标文本显示所有值的内容

Question

不知何故event.currentTarget.textContent在选择时显示所有结果

handleChange(event) {
console.log(event.currentTarget.textContent);
}
render() {
var items = [];
for (var key in this.props.data) {
items.push(<option key={key} value={key}>{this.props.data[key].name}</option>);
}
return (
<div className="">
<select onChange={this.handleChange}>
<option value=''>Default</option>
{items}
</select>
</div>
);
}

控制台日志结果为：DefaultCategory1Category2Cateogry3如何获取所选选项文本？

示例：值显示值，但当前目标显示所有值：http://jsfiddle.net/3q2bswLy/10/

Answer 1

可以使用ELEMENT.value访问select元素的值。

使用ELEMENT.textContent将为您提供该元素的子元素的所有内容(实际上是一个字符串，包含<option>元素中的所有值(。

下面是一个通用的 javascript 示例，但它适用于 reactevent.currentTarget完全相同：

console.log(document.querySelector('select').value);
console.log(document.querySelector('select').textContent);

<select>
<option>val1</option>
<option selected="selected">val2</option>
<option>val3</option>
</select>

检查以下jsfiddle：
https://jsfiddle.net/p89a6r3L/