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>
    );
}

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

输出：NAME - ＆gt;阿富汗，CODE - ＆gt;国家

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

Answer 1

您可以在选项的值中发送整个对象，以使用所选对象的所有属性。

＆＃13;

map

＆＃13;

希望这将有助于将来出现类似问题

Answer 2

这样写它来获取所选项目的属性：

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'/>

在“选择”字段中获取所选选项的属性

2 个答案: