Reactjs 在“选择”字段中获取所选选项的属性 countries（） { 返回[{“姓名”：“阿富汗”，“代码”：“AF”}，{“姓名”：“阿尔巴尼亚”，“代码”：“AL”}，…]； } handleCountryChange（e） { log（'NAME->'+e.target.value'，CODE->'+e.target.id）； //输出：名称->阿富汗，代码->国家 } render（） { 返回( 此.handleCountryChange（e）}> {countries（）.map（（country，i）=>{return（ {country.name} )})} ); }

使用select元素上的onChange处理程序，我试图检索选项的属性。

country code

和

country name

分别存储在其id和value属性中。我得到以下结果

输出：名称->阿富汗，代码->国家

---

这意味着我将从所选选项中获取select元素的id和值。如何从活动的

元素上发生的事件中检索该元素的属性，而不是从select元素本身中检索该元素的属性？

这样编写以获取所选项目的属性：

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

检查此示例：

let data=[{a:1，b:'a'}，{a:2，b:'b'}，{a:3，b:'c'}]；
类应用程序扩展了React.Component{
handleCountryChange（e）{
让index=e.target.selectedIndex；
设el=e.target.childNodes[索引]
let option=el.getAttribute（'id'）；
console.log（'Name，Code'，e.target.value，option）；
}
render（）{
返回(
此.handleCountryChange（e）}>
{
data.map（（国家，i）=>{country.a}）
}
);
}
}
ReactDOM.render（，document.getElementById（'app'））

---

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

getValue（e）{
log（JSON.parse（e.target.value））；
}
render（）{
设cc=[{
值：'1st'，
身份证号码：1
},
{
值：'2nd'，
身份证号码：2
}]
this.getValue（e）}>
一个
两个
}

太好了。以元素的值发送整个对象绝对是可行的。谢谢你，科查尔。你是一个救生员，它帮助了你：）

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