Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Bootstrap button group toggle react js example
var ProjectForm = React.createClass({
getInitialState: function() {
return { headerText: 'nothing' }
},
handleToggleChange: function(value) {
this.setState({ headerText: value.toUpperCase() })
},
render: function() {
return (
<form>
<Toggle onChange={this.handleToggleChange} ref="toggle"/>
{ this.state.headerText }
</form>
)
}
});
var Toggle = React.createClass({
getInitialState: function() {
return { role: 'owner' }
},
handleClick: function(e) {
this.setState({ role: e.target.value });
this.props.onChange(e.target.value);
},
render: function() {
var classNames = {
'owner': 'btn btn-default',
'freelancer': 'btn btn-default',
'connector': 'btn btn-default'
}
classNames[this.state.role] += ' active';
return (
<div id="role" className="btn-group" aria-label="Project role">
<button
className={classNames.owner}
type="button"
value="owner"
onClick={this.handleClick}>
Hiring manager
</button>
<button
className={classNames.freelancer}
type="button"
value="freelancer"
onClick={this.handleClick}>
Freelancer
</button>
<button
className={classNames.connector}
type="button"
value="connector"
onClick={this.handleClick}>
Connector
</button>
</div>
);
}
});
ReactDOM.render(
<ProjectForm/>,
document.getElementById('content')
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.