<Checkbox> Stateless

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 {
       >
         <input
           {...this.props}
+          className={style.input}
+          onClick={this.handleInputClick}
           ref='input'
           type='checkbox'
-          className={style.input}
-          checked={this.state.checked}
-          onChange={this.handleChange}
-          onClick={this.handleInputClick}
         />
         <span data-role='checkbox' className={checkboxClassName} onMouseDown={this.handleMouseDown}>
           <Ripple ref='ripple' data-role='ripple' className={style.ripple} spread={3} centered />
@@ -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;

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.

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 {
         <p style={{marginBottom: '10px'}}>Lorem ipsum...</p>
 
         <Checkbox
+          checked={this.state.checkbox_1}
           label="Checked checkbox"
-          checked
-          onChange={this.handleChange}
+          onChange={this.handleChange.bind(this, 'checkbox_1')}
           onFocus={this.handleFocus}
           onBlur={this.handleBlur}
         />
         <Checkbox
+          checked={this.state.checkbox_2}
           label="Not checked biatch"
-          onChange={this.handleChange}
+          onChange={this.handleChange.bind(this, 'checkbox_2')}
           onFocus={this.handleFocus}
           onBlur={this.handleBlur}
         />
         <Checkbox
+          checked={this.state.checkbox_3}
           label="Disabled checkbox"
-          checked
           disabled
-          onChange={this.handleChange}
+          onChange={this.handleChange.bind(this, 'checkbox_3')}
           onFocus={this.handleFocus}
           onBlur={this.handleBlur}
         />