Javascript onClick不处理选项字段

我有一系列的国家

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>   

handleCountryChange（val）{
console.log（val）
}
{countries.map（（val，index）=>{
返回（this.handleCountryChange（val）}键={index}>{val.name}）
})}

但是这里没有调用我的

onClick

我想获取

onClick

函数中数组的所有字段。。。我如何使用javascript或reactjs实现这一点

和onChange给出事件和目标值，而不是所有字段

---

您应该将处理程序放在

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> 

this.handleCountryChange（事件）}>
{countries.map（（val，index）=>{
返回（{val.name}）
})}

您应该将处理程序放在

选择元素上。不在单个
选项上

试试下面的方法

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

this.handleCountryChange（事件）}>
{countries.map（（val，index）=>{
返回（{val.name}）
})}
将
onChange
处理程序放在
select
元素上

示例

class App extends React.Component {
  state = {
    countries: [
      {
        name: "United States",
        value: "US",
        currency: "USD"
      },
      {
        name: "Israle",
        value: "IL",
        currency: "ILS"
      },
      {
        name: "United Kingdom",
        value: "UK",
        currency: "GBP"
      }
    ]
  };

  handleCountryChange = event => {
    const { value } = event.target;
    const option = this.state.countries.find(
      country => country.value === value
    );
    console.log(option);
  };

  render() {
    const { countries } = this.state;

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

类应用程序扩展了React.Component{
状态={
国家：[
{
名称：“美国”，
价值：“美国”，
货币：“美元”
},
{
名称：“以色列”，
值：“IL”，
货币：“ILS”
},
{
名称：“联合王国”，
价值：“英国”，
货币：“英镑”
}
]
};
handleCountryChange=事件=>{
const{value}=event.target；
const option=this.state.countries.find(
country=>country.value==value
);
console.log（可选）；
};
render（）{
const{countries}=this.state；
返回(
{countries.map（（val，index）=>{
返回(
{val.name}
);
})}
);
}
}
将
onChange
处理程序放在
select
元素上

示例

class App extends React.Component {
  state = {
    countries: [
      {
        name: "United States",
        value: "US",
        currency: "USD"
      },
      {
        name: "Israle",
        value: "IL",
        currency: "ILS"
      },
      {
        name: "United Kingdom",
        value: "UK",
        currency: "GBP"
      }
    ]
  };

  handleCountryChange = event => {
    const { value } = event.target;
    const option = this.state.countries.find(
      country => country.value === value
    );
    console.log(option);
  };

  render() {
    const { countries } = this.state;

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

类应用程序扩展了React.Component{
状态={
国家：[
{
名称：“美国”，
价值：“美国”，
货币：“美元”
},
{
名称：“以色列”，
值：“IL”，
货币：“ILS”
},
{
名称：“联合王国”，
价值：“英国”，
货币：“英镑”
}
]
};
handleCountryChange=事件=>{
const{value}=event.target；
const option=this.state.countries.find(
country=>country.value==value
);
console.log（可选）；
};
render（）{
const{countries}=this.state；
返回(
{countries.map（（val，index）=>{
返回(
{val.name}
);
})}
);
}
}
我将
值设置为索引，然后从数组中按索引值获取元素

handleCountryChange(e){
  this.setState({
    country: countries[e.target.value].value,
    currency: countries[e.target.value].currency
  })
}

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

handleCountryChange（e）{
这是我的国家({
国家：国家[e.target.value].value，
货币：国家[e.target.value]。货币
})
}
此.handleCountryChange（e）}>
{countries.map（（val，index）=>{
返回（{val.name}）
})}
我将
值设置为索引，然后从数组中按索引值获取元素

handleCountryChange(e){
  this.setState({
    country: countries[e.target.value].value,
    currency: countries[e.target.value].currency
  })
}

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

handleCountryChange（e）{
这是我的国家({
国家：国家[e.target.value].value，
货币：国家[e.target.value]。货币
})
}
此.handleCountryChange（e）}>
{countries.map（（val，index）=>{
返回（{val.name}）
})}
在select元素中使用
onChange
？那么如何从数组中获取所选元素的所有字段？在select元素中使用
onChange
？那么如何从数组中获取所选元素的所有字段？哎呀！！！你犯了一个严重的错误。。。val在
.map
函数中，而您将其传递到了函数外部…即使它是错误的，我也希望从数组中获取所选元素的所有字段。。。事件将只提供目标值，您可以在数组中迭代并找到您需要的特定项。哦！！！你犯了一个严重的错误。。。val在
.map
函数中，而您将其传递到了函数外部…即使它是错误的，我也希望从数组中获取所选元素的所有字段。。。事件将只提供目标值，您可以遍历数组并找到所需的特定项。这是错误的，我需要数组中选定元素的所有字段。。。事件将仅给出目标值。在
onChange
函数中，man不会给我
currency
。这是错误的，我需要数组中所选元素的所有字段。。。事件将仅给出目标值，但在
onChange
函数中，man不会给我
货币