docs: rewrite Checkbox demos to ES6 component (#4944)

components/checkbox/demo/check-all.md

@@ -20,14 +20,12 @@ const CheckboxGroup = Checkbox.Group;
 const plainOptions = ['Apple', 'Pear', 'Orange'];
 const defaultCheckedList = ['Apple', 'Orange'];
 
-const App = React.createClass({
-  getInitialState() {
-    return {
-      checkedList: defaultCheckedList,
-      indeterminate: true,
-      checkAll: false,
-    };
-  },
+class App extends React.Component {
+  state = {
+    checkedList: defaultCheckedList,
+    indeterminate: true,
+    checkAll: false,
+  };
   render() {
     return (
       <div>
@@ -44,22 +42,22 @@ const App = React.createClass({
         <CheckboxGroup options={plainOptions} value={this.state.checkedList} onChange={this.onChange} />
       </div>
     );
-  },
-  onChange(checkedList) {
+  }
+  onChange = (checkedList) => {
     this.setState({
       checkedList,
       indeterminate: !!checkedList.length && (checkedList.length < plainOptions.length),
       checkAll: checkedList.length === plainOptions.length,
     });
-  },
-  onCheckAllChange(e) {
+  }
+  onCheckAllChange = (e) => {
     this.setState({
       checkedList: e.target.checked ? plainOptions : [],
       indeterminate: false,
       checkAll: e.target.checked,
     });
-  },
-});
+  }
+}
 
 ReactDOM.render(<App />, mountNode);
 ````

components/checkbox/demo/controller.md

@@ -16,13 +16,11 @@ Communicated with other components.
 ````jsx
 import { Checkbox, Button } from 'antd';
 
-const App = React.createClass({
-  getInitialState() {
-    return {
-      checked: true,
-      disabled: false,
-    };
-  },
+class App extends React.Component {
+  state = {
+    checked: true,
+    disabled: false,
+  };
   render() {
     const label = `${this.state.checked ? 'Checked' : 'Unchecked'}-${this.state.disabled ? 'Disabled' : 'Enabled'}`;
     return (
@@ -50,20 +48,20 @@ const App = React.createClass({
         </p>
       </div>
     );
-  },
-  toggleChecked() {
+  }
+  toggleChecked = () => {
     this.setState({ checked: !this.state.checked });
-  },
-  toggleDisable() {
+  }
+  toggleDisable = () => {
     this.setState({ disabled: !this.state.disabled });
-  },
-  onChange(e) {
+  }
+  onChange = (e) => {
     console.log('checked = ', e.target.checked);
     this.setState({
       checked: e.target.checked,
     });
-  },
-});
+  }
+}
 
 ReactDOM.render(<App />, mountNode);
 ````

components/checkbox/demo/disabled.md

@@ -16,9 +16,11 @@ Disabled checkbox.
 ````jsx
 import { Checkbox } from 'antd';
 
-ReactDOM.render(<div>
-  <Checkbox defaultChecked={false} disabled />
-  <br />
-  <Checkbox defaultChecked disabled />
-</div>, mountNode);
+ReactDOM.render(
+  <div>
+    <Checkbox defaultChecked={false} disabled />
+    <br />
+    <Checkbox defaultChecked disabled />
+  </div>
+  , mountNode);
 ````