React JSラジオボタンが選択されていません

Question

私はラジオボタンのコードを書いていますが、動作していません。デフォルトのチェックを選択したいのですが、それも動作していません。いずれかのボタンを選択します。助けてあげてください。

var FlightDetails = React.createClass({ 
    getInitialState:function() { 
     return { 
      view :'fare', 
      selectedOption :0 
     }; 
    }, 
    handleChange: function (e) { 
     if(e.target.value == 'itinerary'){ 
      this.setState({ 
       view: 'itinerary', 
       selectedOption :1 
      }) 
     } 
     if(e.target.value == 'fare'){ 
      this.setState({ 
       view: 'fare', 
       selectedOption :0 
      }) 
     } 
    }, 
    render:function() { 
     return(
      <div id={this.props.id} className="collapse flightDetails"> 
       <div className="row col-sm-12 col-centered"> 
        <label className="col-sm-3 col-xs-12 col-sm-3 col-sm-3"> 
         <input type="radio" name="Details" value={'fare'} 
           checked={this.state.selectedOption == 0} 
           onChange={this.handleChange}/>{' '}Fare 
        </label> 
        <label className="col-sm-3 col-xs-12 col-sm-3 col-sm-3"> 
         <input type="radio" name="Details" value={'itinerary'} 
           checked={this.state.selectedOption == 1} 
           onChange={this.handleChange}/> {' '}Itinerary 
        </label> 
       </div> 

      </div> 
     ) 
    } 
}); 

ここはjsfiddleです。

Answer 1

私は良い、あなたがこのような何かことができますしたいものを理解している場合：ここで

var FlightDetails = React.createClass({ 
getInitialState:function() { 
    return { 
     view :'fare', 
     selectedOption: false 
    }; 
}, 
handleChange: function (e) { 
    if(e.target.name == 'itinerary'){ 
     this.setState({ 
      view: 'itinerary', 
      selectedOption: true 
     }) 
    } 
    if(e.target.name == 'fare'){ 
     this.setState({ 
      view: 'fare', 
      selectedOption: false 
     }) 
    } 
}, 
render:function() { 
    return(
     <div id={this.props.id} className="collapse flightDetails"> 
      <div className="row col-sm-12 col-centered"> 
       <label className="col-sm-3 col-xs-12 col-sm-3 col-sm-3"> 
        <input type="radio" name="fare" 
          checked={!this.state.selectedOption} 
          onChange={this.handleChange.bind(this)}/>{' '}Fare 
       </label> 
       <label className="col-sm-3 col-xs-12 col-sm-3 col-sm-3"> 
        <input type="radio" name="itinerary" 
          checked={this.state.selectedOption} 
          onChange={this.handleChange.bind(this)}/> {' '}Itinerary 
       </label> 
      </div> 

     </div> 
    ) 
} 
}); 

がjsfiddleです。