2015-10-11 20:07:09 +03:00
|
|
|
import React from 'react';
|
2015-10-20 21:06:24 +03:00
|
|
|
import { RadioGroup, RadioButton } from '../../components/radio';
|
2015-10-06 22:18:39 +03:00
|
|
|
|
2015-10-22 02:31:17 +03:00
|
|
|
class RadioGroupTest extends React.Component {
|
2015-11-12 03:07:30 +03:00
|
|
|
state = {
|
|
|
|
value: 'vvendetta'
|
|
|
|
};
|
|
|
|
|
|
|
|
handleChange = (value) => {
|
|
|
|
console.log('Changed!', { comic: value});
|
|
|
|
this.setState({value});
|
2015-10-22 02:31:17 +03:00
|
|
|
};
|
2015-10-06 22:18:39 +03:00
|
|
|
|
2015-10-22 02:31:17 +03:00
|
|
|
handleFocus = () => {
|
2015-10-06 22:18:39 +03:00
|
|
|
console.log('Focused V for a Vendetta');
|
2015-10-22 02:31:17 +03:00
|
|
|
};
|
2015-10-06 22:18:39 +03:00
|
|
|
|
2015-10-22 02:31:17 +03:00
|
|
|
handleBlur = () => {
|
2015-10-06 22:18:39 +03:00
|
|
|
console.log('Blurred Watchmen');
|
2015-10-22 02:31:17 +03:00
|
|
|
};
|
2015-10-06 22:18:39 +03:00
|
|
|
|
|
|
|
render () {
|
|
|
|
return (
|
|
|
|
<section>
|
2015-10-06 22:34:43 +03:00
|
|
|
<h5>Radio Button</h5>
|
2015-10-06 22:18:39 +03:00
|
|
|
<p style={{marginBottom: '10px'}}>Lorem ipsum...</p>
|
|
|
|
|
2015-11-12 03:07:30 +03:00
|
|
|
<RadioGroup name='comic' value={this.state.value} onChange={this.handleChange}>
|
2015-10-06 22:18:39 +03:00
|
|
|
<RadioButton label='The Walking Dead' value='thewalkingdead'/>
|
|
|
|
<RadioButton label='From Hell' value='fromhell' disabled/>
|
|
|
|
<RadioButton label='V for a Vendetta' value='vvendetta' onFocus={this.handleFocus}/>
|
|
|
|
<RadioButton label='Watchmen' value='watchmen' onBlur={this.handleBlur}/>
|
|
|
|
</RadioGroup>
|
|
|
|
</section>
|
|
|
|
);
|
|
|
|
}
|
2015-10-21 13:25:07 +03:00
|
|
|
}
|
2015-10-22 02:31:17 +03:00
|
|
|
|
|
|
|
export default RadioGroupTest;
|