オプションタグ要素のキーにreactjsのイベントハンドラ関数からアクセスできますか？

Question

私は非常に特殊で奇妙な状況があります。

私は、選択ボックスから選択する必要のあるすべてのオブジェクトを格納する十分な大きさのオブジェクト配列を持っています。このような

Sortavは：

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

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

] 

点は、codeプロパティには、オプションの名前に関連しない方法です。

私は現在、これを選択ボックスに入れています。オプションを選択すると、そのオプションのコードを返す必要があります。私は、コードではなく、私はちょうど選択されたオプションの名前をアクセスするイベントハンドラにしたがって、基本的

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

コード値を含むoptionにvalue属性を渡す必要があります。だから、

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

ようなものになると、あなたのonChange機能でe.target.valueのようにアクセスします。

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