【React】ラジオボタンの設置

React を使って、ラジオボタンを複数設置する時は、id の付け方に注意した方がいいのかもしれない。

例えば、↓こちらのような、jsのクラスを使用する時、

var RadioButton = React.createClass({
    getInitialState: function(){
        return {selection: 'first'};
    },
    handleChenge: function(event){
        console.log(event.target.value);
        this.setState({selection:event.target.value});
    },
    render: function(){
        return (
            <div>どれか1つを選んでください:
                <div>
                    <input id="id1_1"
                        type="radio"
                        value="first"
                        name="radio1"
                        checked={this.state.selection === 'first'}
                        onChange={this.handleChenge}
                    /><label htmlFor="id1_1">最初の選択肢</label>
                </div>
                <div>
                    <input id="id1_2"
                        type="radio"
                        value="second"
                        name="radio1"
                        checked={this.state.selection === 'second'}
                        onChange={this.handleChenge}
                    /><label htmlFor="id1_2">次の選択肢</label>
                </div>
                <div>
                    <input id="id1_3"
                        type="radio"
                        value="third"
                        name="radio1"
                        checked={this.state.selection === 'third'}
                        onChange={this.handleChenge}
                    /><label htmlFor="id1_3">最後の選択肢</label>
                </div>
            </div>
        );
    }
});

ReactDOM.render(
    <RadioButton />,
    document.getElementById('content')
)

一見、js上ではクラスになっているけど、htmlの記述に関しては、idなどが他と被らないように注意する必要があるのかもしれない。