javascript - onClick 不适用于选项字段

Question

我有很多国家/地区

const countries =  [{
  name: 'United States', value: 'US', currency: 'USD'
}, {
  name: 'Israle', value: 'IL', currency: 'ILS'
}, {
  name: 'United Kingdom', value: 'UK', currency: 'GBP'
}] 

以及 react 组件中的以下代码

handleCountryChange(val){
  console.log(val)
}

<select className="form-control input-lg" name="country" placeholder="Country" >
  { countries.map((val, index) => {   
    return(<option value={val.value} onClick={() => this.handleCountryChange(val)} key={index}>{val.name}</option>)
  })}
</select>   

但是这里我的onClick没有被调用...我想获取onClick函数内数组的所有字段。 ..我如何使用 javascript 或 Reactjs 来做到这一点？

And onChange gives the event and targeted value not all the fields

Answer 1

您应该将处理程序放在 select 元素上。不适用于单个选项。

尝试以下操作..

<select className="form-control input-lg" name="country" placeholder="Country" onChange={(event) => this.handleCountryChange(event)}>
  { countries.map((val, index) => {   
    return(<option value={val.value} key={index}>{val.name}</option>)
  })}
</select>