refactor: simplify focus logic

react-component · Feb 28, 2017 · 04a5d13 · 04a5d13
1 parent 6893eed
commit 04a5d13
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 21 deletions.
diff --git a/assets/index.less b/assets/index.less
@@ -11,10 +11,9 @@
   line-height: 1;
   vertical-align: middle;
 
-  &:hover, &-focused {
-    .@{checkboxInnerPrefixCls} {
-      border-color: #bcbcbc;
-    }
+  &:hover .@{checkboxInnerPrefixCls},
+  &-input:focus + .@{checkboxInnerPrefixCls} {
+    border-color: #3dbcf6;
   }
 
   &-inner {

diff --git a/src/Checkbox.jsx b/src/Checkbox.jsx
@@ -36,7 +36,6 @@ export default class Checkbox extends React.Component {
 
     this.state = {
       checked,
-      focus: false,
     };
   }
 
@@ -52,16 +51,6 @@ export default class Checkbox extends React.Component {
     return PureRenderMixin.shouldComponentUpdate.apply(this, args);
   }
 
-  handleFocus = (e) => {
-    this.setState({ focus: true });
-    this.props.onFocus(e);
-  };
-
-  handleBlur = (e) => {
-    this.setState({ focus: false });
-    this.props.onBlur(e);
-  };
-
   handleChange = (e) => {
     const { props } = this;
     if (props.disabled) {
@@ -88,18 +77,26 @@ export default class Checkbox extends React.Component {
 
   render() {
     const {
-      prefixCls, className, style, name, type, disabled, readOnly, tabIndex, onClick,
+      prefixCls,
+      className,
+      style,
+      name,
+      type,
+      disabled,
+      readOnly,
+      tabIndex,
+      onClick,
+      onFocus,
+      onBlur,
     } = this.props;
-    const { checked, focus } = this.state;
+    const { checked } = this.state;
     const classString = classNames(prefixCls, className, {
       [`${prefixCls}-checked`]: checked,
-      [`${prefixCls}-focused`]: focus,
       [`${prefixCls}-disabled`]: disabled,
     });
 
     return (
       <span className={classString} style={style}>
-        <span className={`${prefixCls}-inner`} />
         <input
           name={name}
           type={type}
@@ -109,10 +106,11 @@ export default class Checkbox extends React.Component {
           className={`${prefixCls}-input`}
           checked={!!checked}
           onClick={onClick}
-          onFocus={this.handleFocus}
-          onBlur={this.handleBlur}
+          onFocus={onFocus}
+          onBlur={onBlur}
           onChange={this.handleChange}
         />
+        <span className={`${prefixCls}-inner`} />
       </span>
     );
   }