reactjs - 获取选择字段中所选选项的属性

Question

countries()
{
    return [{"name":"Afghanistan","code":"AF"},{"name":"Albania","code":"AL"},...];
}

handleCountryChange(e)
{
    console.log('NAME -> ' + e.target.value, ', CODE -> ' + e.target.id);
    // Outputs: NAME -> Afghanistan, CODE -> country     
}

render()
{
    return (
        <select className="form-control country-name" id="country"
        onChange={e => this.handleCountryChange(e)} >

            {countries().map((country, i) => { return ( 
                <option id={country.code} value={country.name} key={i} >
                    {country.name}
                </option> 
            )})}
        </select>
    );
}

通过选择元素上的 onChange 处理程序，我试图检索选项的属性。 country code和 country name分别存储在其 id 和 value 属性中。我得到以下结果

Outputs: NAME -> Afghanistan, CODE -> country

这意味着我正在从所选选项中获取选择元素的 ID 和值。如何检索事件 <option> 的属性来自发生在其上的事件的元素，而不是选择元素本身？

Answer 1

这样写获取选中item的属性:

handleCountryChange(e){
    let index = e.target.selectedIndex;
    let el = e.target.childNodes[index]
    let option =  el.getAttribute('id');  
    console.log('Name, Code', e.target.value, option); 
}

检查这个例子:

let data = [{a:1, b:'a'}, {a:2, b:'b'}, {a:3, b:'c'}];

class App extends React.Component{

	handleCountryChange(e){
	    let index = e.target.selectedIndex;
	    let el = e.target.childNodes[index]
	    let option =  el.getAttribute('id');  
	    console.log('Name, Code', e.target.value, option); 
	}

	render(){
	    return (
	        <select 
	        	id="country"
	        	onChange={e => this.handleCountryChange(e)} >
	            	{
                           data.map((country, i) =>  <option id={country.b} value={country.a} key={i} > {country.a} </option> )
	            	}
	        </select>
	    );
	}
}

ReactDOM.render(<App/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>