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 。