To run the example:
npm install -g nwb
react run example.js --auto-install
import 'bootstrap/dist/css/bootstrap.css' | |
import React from 'react' | |
import Grid from 'react-bootstrap/lib/Grid' | |
import Col from 'react-bootstrap/lib/Col' | |
import RadioGroup from './RadioGroup' | |
export default class Example extends React.Component { | |
state = { | |
test: '' | |
} | |
handleChange = (e) => { | |
this.setState({[e.target.name]: e.target.value}) | |
} | |
render() { | |
return <Grid> | |
<Col sm={12} style={{marginBottom: '1em'}}> | |
<h1><RadioGroup/></h1> | |
<RadioGroup | |
name="test" | |
onChange={this.handleChange} | |
options={[ | |
['dairy', 'Cheese'], | |
['fruit', 'Apple'], | |
['meat', 'Ham'], | |
]} | |
value={this.state.test} | |
/> | |
</Col> | |
<Col sm={12}> | |
<pre>{`<RadioGroup | |
name="test" | |
onChange={this.handleChange} | |
options={[ | |
['dairy', 'Cheese'], | |
['fruit', 'Apple'], | |
['meat', 'Ham'], | |
]} | |
value={this.state.test} | |
/>`}</pre> | |
</Col> | |
</Grid> | |
} | |
} |
import React, {PropTypes as t} from 'react' | |
import Button from 'react-bootstrap/lib/Button' | |
import ButtonGroup from 'react-bootstrap/lib/ButtonGroup' | |
/** | |
* A ButtonGroup whose buttons act like a radio button. | |
* Options should be passed as a list of [value, display] tuples. | |
* Buttons are set up so you can use e.target.name and e.target.value in your | |
* onChange handler like you would with regular form inputs. | |
*/ | |
let RadioGroup = React.createClass({ | |
propTypes: { | |
name: t.string.isRequired, | |
onChange: t.func.isRequired, | |
options: t.arrayOf(t.arrayOf(t.string)), | |
value: t.string.isRequired, | |
}, | |
render() { | |
let {disabled, name, onChange, options, value, ...props} = this.props | |
return <ButtonGroup {...props}> | |
{options.map(option => | |
<Button | |
key={option[0]} | |
bsStyle={option[0] === value ? 'primary' : 'default'} | |
children={option[1]} | |
disabled={disabled} | |
name={name} | |
onClick={onChange} | |
value={option[0]} | |
/> | |
)} | |
</ButtonGroup> | |
} | |
}) | |
export default RadioGroup |