onChangeで選択された値を渡してくれるコールバックと、defaultValueで、初期選択の値を設定できるみたいな感じです。 ラジオボタンのリストの要素はoptionタグで指定できる雰囲気でいってみましょう。
まず、プロパティを定義します。
interface RadioListProps extends React.Props<{}> { defaultValue?: string; onChange?: (value: string) => void; }
ステートには、選択中の値を持たせることにします。
interface RadioListState { value: string; }
あとはrenderで割と頑張る。ポイントは、React.Children.forEachで子要素をループ回してるところです。
class RadioList extends React.Component<RadioListProps, RadioListState> { constructor(props: RadioListProps) { super(props); this.state = { value: this.props.defaultValue } as RadioListState; } private handleChanged(value: string, e: React.SyntheticEvent) { this.props.onChange(value); this.setState({ value: value } as RadioListState); } render() { var radios = new Array<React.ReactElement<any>>(); React.Children.forEach(this.props.children, (option: React.ReactElement<{ value: string; label: string; }>, index) => { radios.push(<div> <label> <input type="radio" value={option.props.value} checked={this.state.value === option.props.value} onChange={this.handleChanged.bind(this, option.props.value) } /> {option.props.label} </label> </div>); }); return <span>{radios}</span>; } }
こんな感じに使えます。
ReactDOM.render(<RadioList onChange={x => console.log(x) } defaultValue="B"> <option value="A" label="Aです" /> <option value="B" label="Bです" /> <option value="C" label="Cです" /> </RadioList>, document.getElementById("content"));