在选择字段中获取所选选项的属性答案

【问题标题】：Get properties of selected option in Select field在选择字段中获取所选选项的属性
【发布时间】：2017-08-27 05:41:29
【问题描述】：

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 属性中。我得到以下结果

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

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

【问题讨论】：

标签： reactjs

【解决方案1】：

这样写来获取选中项的属性：

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】：

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

getValue(e) {
    console.log(JSON.parse(e.target.value));
  }

  render() {

  let cc = [{
    value: '1st',
    id: 1
  },
  {
   value: '2nd',
    id: 2
  }]
  
  <select onChange={e => this.getValue(e)}>
          <option value={JSON.stringify(cc[0])}>One</option>
          <option value={JSON.stringify(cc[1])}>Two</option>
</select>
}

希望这将有助于将来解决类似问题

【讨论】：

太棒了。以元素的值发送整个对象绝对是实用的。谢谢，科查尔。