React JS單選按鈕沒有選擇

Question

我是新來的React我已經寫了一個單選按鈕的代碼，但它不工作，我想選擇一個默認選中，但這不是也不工作，並且點擊我也不能選擇任何按鈕。請幫助我，並提前致謝

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。