diff --git a/components/checkbox/index.jsx b/components/checkbox/index.jsx index b9a578e7..a93e8074 100644 --- a/components/checkbox/index.jsx +++ b/components/checkbox/index.jsx @@ -21,24 +21,9 @@ class Checkbox extends React.Component { disabled: false }; - state = { - checked: this.props.checked - }; - - componentWillReceiveProps = (next_props) => { - console.log('componentWillReceiveProps', next_props.checked); - // this.setState({ checked: next_props.checked }); - }; - - handleChange = (event) => { - this.setState({checked: !this.state.checked}, () => { - if (this.props.onChange) this.props.onChange(event, this); - }); - }; - handleClick = (event) => { events.pauseEvent(event); - if (!this.props.disabled) this.handleChange(event); + if (!this.props.disabled) this.props.onChange(event); }; handleMouseDown = (event) => { @@ -52,7 +37,7 @@ class Checkbox extends React.Component { render () { let fieldClassName = style.field; let checkboxClassName = style.check; - if (this.state.checked) checkboxClassName += ` ${style.checked}`; + if (this.props.checked) checkboxClassName += ` ${style.checked}`; if (this.props.disabled) fieldClassName += ` ${style.disabled}`; if (this.props.className) fieldClassName += ` ${this.props.className}`; @@ -64,12 +49,10 @@ class Checkbox extends React.Component { > @@ -86,14 +69,6 @@ class Checkbox extends React.Component { focus () { this.refs.input.focus(); } - - getValue () { - return this.state.checked; - } - - setValue (value) { - this.setState({checked: value}); - } } export default Checkbox; diff --git a/components/checkbox/readme.md b/components/checkbox/readme.md index bfd8abbe..880b4006 100644 --- a/components/checkbox/readme.md +++ b/components/checkbox/readme.md @@ -32,7 +32,5 @@ const TestCheckbox = () => ( This component has state to control its value and how is it rendered. It exposes the following instance methods: -- `getValue` is used to retrieve the current value. -- `setValue` to force a new value. - `blur` to blur the input. - `focus` to focus the input. diff --git a/spec/components/checkbox.jsx b/spec/components/checkbox.jsx index e1511f8c..0772068d 100644 --- a/spec/components/checkbox.jsx +++ b/spec/components/checkbox.jsx @@ -2,8 +2,17 @@ import React from 'react'; import Checkbox from '../../components/checkbox'; class CheckboxTest extends React.Component { - handleChange = (event, instance) => { - console.log('Changed!', instance.getValue()); + + state = { + checkbox_1: true, + checkbox_2: false, + checkbox_3: true + }; + + handleChange = (key) => { + const state = this.state; + state[key] = !state[key]; + this.setState(state); }; handleFocus = () => { @@ -21,23 +30,24 @@ class CheckboxTest extends React.Component {

Lorem ipsum...