Reactの月リストのテキストの代わりに月番号を表示

Question

月をテキストとして表示する月リストを持っていますが、私がしたいのは毎月の数値値を返します。したがって、Januaryは '01' '02'を返すなど...

だから私がしようとしたことは、各オプションリスト項目に小文字の値（数値）とそのテキスト値を与えることです - ここに私のリストはどのように見えるのですか

 <select onChange={this.monthClickHandler.bind(this)}> 
      <option selected={this.props.monthNumber == '01'}>January</option> 
      <option selected={this.props.monthNumber == '02'}>February</option> 
      <option selected={this.props.monthNumber == '03'}>March</option> 
      <option selected={this.props.monthNumber == '04'}>April</option> 
      <option selected={this.props.monthNumber == '05'}>May</option> 
      <option selected={this.props.monthNumber == '06'}>June</option> 
      <option selected={this.props.monthNumber == '07'}>July</option> 
      <option selected={this.props.monthNumber == '08'}>August</option> 
      <option selected={this.props.monthNumber == '09'}>September</option> 
      <option selected={this.props.monthNumber == '10'}>October</option> 
      <option selected={this.props.monthNumber == '11'}>November</option> 
      <option selected={this.props.monthNumber == '12'}>December</option> 
     </select> 

そして、クリックハンドラで、私は、このような

ような値を返すようにしようとしています

それだけですべてが理にかなって、私はここに欠けている何かがあることがうまくいけば、未定義

を返します...私はテキスト値（1月など）を取得することができますが、私はmonthNumber小道具値を返すことはできませんか？誰かが正しい方向に私を指すことができるなら、私は非常に感謝するだろう！

Answer 1

option秒にvalueを追加し、代わりに選択したの、selectにvalueを追加します。

class Months extends React.Component { 
 
    handleChange(event) { 
 
    console.log(event.target.value); 
 
    } 
 
    render() { 
 
    return (
 
     <select value={this.props.monthNumber} onChange={this.handleChange}> 
 
     <option value='01'>January</option> 
 
     <option value='02'>February</option> 
 
     <option value='03'>March</option> 
 
     <option value='04'>April</option> 
 
     <option value='05'>May</option> 
 
     <option value='06'>June</option> 
 
     <option value='07'>July</option> 
 
     <option value='08'>August</option> 
 
     <option value='09'>September</option> 
 
     <option value='10'>October</option> 
 
     <option value='11'>November</option> 
 
     <option value='12'>December</option> 
 
     </select> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(React.createElement(Months), document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script> 
 

 
<div id='app' />

その後、ハンドラevent.target.valueであることが可能になります値。

React docs