Может ли доступ к ключу элемента тега опции из функции обработчика событий в responsejs?

Question

У меня очень специфическая и странная ситуация.

У меня есть достаточно большой массив объектов, в котором хранятся все объекты, которые необходимо выбрать из окна выбора.

Sortav так:

var optionsArray = [ 
    { 
     name: option1, 
     code: f2X 
    }, 

    { 
     name: option2, 
     code: x21 
    }, 
    ... 
    { 
     name: option100, 
     code: Rga 
    }, 

] 

Дело в том, свойство кода никак не связано с именем опций.

В настоящее время я помещаю это в поле выбора, и после выбора опции мне нужно вернуть код этой опции. Вот что выбрать окно и даже обработчик в настоящее время выглядит следующим образом:

class SelectForm extends Component{ 
    onChange(e){ 
     console.log ("option selected", e.target.name); 
     //I can access the name, but what I want to access is the the code 
    } 

    render(){ 
     var _this = this; 

     return (
      <FormGroup controlId="myId"> 
       <FormControl componentClass="select" onChange={this.onChange}> 
        { 
         optionsArray.map(function(value, key) { 
         return <option key={key}>{value.name}</option> 
         }) 
        } 
       </FormControl> 
       </FormGroup> 
     ); 
    } 

Так в основном в обработчик событий, я хочу, чтобы получить доступ к коду, а не имя опции я только что выбрали.

Я думал, что, возможно, я могу получить доступ к индексу массива, который я выбрал из ключа, и сделать что-то вроде этого:

onChange(e){ 
    console.log ("selected option code", optionsArray[e.target.key].code); 
} 

Но ключ не определен. Есть ли способ получить доступ к ключу выбранного варианта из события? Или, что еще лучше, есть ли способ включить код в тег опции, чтобы я мог позже легко получить доступ к нему в обработчике событий?

Answer 1

Вы должны передать атрибут value в option, который будет содержать значение кода. Так что это будет что-то вроде

<FormControl componentClass="select" onChange={this.onChange}> 
    { 
    optionsArray.map(function(value, key) { 
     return <option key={key} value={value.code}>{value.name}</option> 
    }) 
    } 
</FormControl> 

и доступ к нему, как e.target.value в вашей onChange функции.

onChange(e){ 
    console.log ("option selected", e.target.value); 
}