反應事件。currentTarget的textContent顯示所有值

不知何故event.currentTarget.textContent顯示當選擇反應事件。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如何抓住所選選項的文本？

例如：值顯示值，但示出了currentTarget當前所有這些：http://jsfiddle.net/3q2bswLy/10/

來源

2017-08-10 Johnny Derp

一個select元素的值可以訪問使用ELEMENT.value。

使用ELEMENT.textContent將爲您提供該元素的子元素的所有內容（實際上這是一個包含<option>元素中的所有值的字符串）。

下面是一個普通的JavaScript的例子，但它的工作原理爲反應event.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/

來源

2017-08-10 21:25:05 Dekel

沒有運氣：（當使用「document.querySelector（'select'）時，仍然顯示所有結果，但顯示其他下拉組件。textContent」 –

@JohnnyDerp檢查我的回答中的鏈接 – Dekel

這裏是例子：http://jsfiddle.net/3q2bswLy/10/ –

反應事件。currentTarget的textContent顯示所有值

回答

相關問題