autobind

.babelrc

 {
 {
-    "presets":[
-        "es2015", "react"
+    "presets": ["es2015", "stage-0", "react"],
+    "plugins": [
+       ["transform-decorators-legacy"],
     ]
     ]
 }
 }

package.json

@@ -7,6 +7,8 @@
     "start": "webpack-dev-server"
     "start": "webpack-dev-server"
   },
   },
   "dependencies": {
   "dependencies": {
+    "autobind-decorator": "^1.4.1",
+    "babel-preset-stage-0": "^6.24.1",
     "halogen": "^0.2.0",
     "halogen": "^0.2.0",
     "html-webpack-plugin": "^2.28.0",
     "html-webpack-plugin": "^2.28.0",
     "jquery": "^3.2.1",
     "jquery": "^3.2.1",
@@ -14,7 +16,6 @@
     "react": "^15.5.4",
     "react": "^15.5.4",
     "react-addons-update": "^15.5.2",
     "react-addons-update": "^15.5.2",
     "react-alert": "^2.0.1",
     "react-alert": "^2.0.1",
-    "react-autobind": "^1.0.6",
     "react-bootstrap": "^0.31.0",
     "react-bootstrap": "^0.31.0",
     "react-dom": "^15.5.4",
     "react-dom": "^15.5.4",
     "react-router-dom": "^4.1.1",
     "react-router-dom": "^4.1.1",
@@ -24,6 +25,7 @@
   "devDependencies": {
   "devDependencies": {
     "babel-core": "^6.24.1",
     "babel-core": "^6.24.1",
     "babel-loader": "^7.0.0",
     "babel-loader": "^7.0.0",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "css-loader": "^0.28.1",
     "css-loader": "^0.28.1",

readme.md

@@ -5,7 +5,7 @@ yarn config set registry 'https://registry.npm.taobao.org'
 
 
 yarn add webpack webpack-dev-server path
 yarn add webpack webpack-dev-server path
 
 
-yarn add babel-loader babel-core babel-preset-es2015 babel-preset-react --dev
+yarn add babel-loader babel-preset-stage-0 babel-core babel-preset-es2015 babel-preset-react --dev
 
 
 yarn add html-webpack-plugin
 yarn add html-webpack-plugin
 
 

src/components/Element.js

 import React from 'react'
 import React from 'react'
 import Move from '../libs/move'
 import Move from '../libs/move'
 import EventEmitter from '../libs/eventEmitter'
 import EventEmitter from '../libs/eventEmitter'
-import autoBind from 'react-autobind'
+import autobind from 'autobind-decorator'
 
 
+@autobind
 export default class Element extends React.Component {
 export default class Element extends React.Component {
   static get getDefaultProps() {
   static get getDefaultProps() {
     return {
     return {
@@ -24,7 +25,6 @@ export default class Element extends React.Component {
       name: this.props.name,
       name: this.props.name,
       prev_name: this.props.name
       prev_name: this.props.name
     };
     };
-    autoBind(this);
   }
   }
 
 
   componentDidUpdate(props, state) {
   componentDidUpdate(props, state) {

src/components/ElementGroup.js

 import React from 'react'
 import React from 'react'
 import Element from './Element'
 import Element from './Element'
 import ReactAddonsUpdate from 'react-addons-update'
 import ReactAddonsUpdate from 'react-addons-update'
-import autoBind from 'react-autobind'
+import autobind from 'autobind-decorator'
 
 
+@autobind
 export default class ElementGroup extends React.Component {
 export default class ElementGroup extends React.Component {
   constructor(props){
   constructor(props){
     super(props);
     super(props);
@@ -13,7 +14,6 @@ export default class ElementGroup extends React.Component {
         { id: 3, name: "药架格", initialPos: {x: 80, y: 70 + 60 * 2}, target_type: 'RegionalDesign::DrugBrandreth' }
         { id: 3, name: "药架格", initialPos: {x: 80, y: 70 + 60 * 2}, target_type: 'RegionalDesign::DrugBrandreth' }
       ]
       ]
     };
     };
-    autoBind(this);
   }
   }
 
 
   cloneElement(element) {
   cloneElement(element) {

src/components/Header.js

@@ -3,15 +3,15 @@ import ModalRepoForm from './ModalRepoForm'
 import ReactAddonsUpdate from 'react-addons-update'
 import ReactAddonsUpdate from 'react-addons-update'
 import Loader from 'halogen/PulseLoader'
 import Loader from 'halogen/PulseLoader'
 import { Link } from 'react-router-dom'
 import { Link } from 'react-router-dom'
-import autoBind from 'react-autobind'
+import autobind from 'autobind-decorator'
 
 
+@autobind
 export default class Header extends React.Component {
 export default class Header extends React.Component {
   constructor(props){
   constructor(props){
     super(props);
     super(props);
     this.state = {
     this.state = {
       data: null, loading: true, error: null
       data: null, loading: true, error: null
     };
     };
-    autoBind(this);
   }
   }
 
 
   componentDidMount() {
   componentDidMount() {

src/components/ModalRepoForm.js

@@ -3,15 +3,15 @@ import { Modal, Button } from 'react-bootstrap'
 import { Form, FormGroup, Col, FormControl, ControlLabel } from 'react-bootstrap'
 import { Form, FormGroup, Col, FormControl, ControlLabel } from 'react-bootstrap'
 import EventEmitter from '../libs/eventEmitter'
 import EventEmitter from '../libs/eventEmitter'
 import $ from 'jquery'
 import $ from 'jquery'
-import autoBind from 'react-autobind'
+import autobind from 'autobind-decorator'
 
 
+@autobind
 export default class ModalRepoForm extends React.Component {
 export default class ModalRepoForm extends React.Component {
   constructor(props){
   constructor(props){
     super(props);
     super(props);
     this.state = {
     this.state = {
       showModal: false, name: ''
       showModal: false, name: ''
     };
     };
-    autoBind(this);
   }
   }
 
 
   close() {
   close() {

src/components/RegionalDesign.js

@@ -4,15 +4,15 @@ import Element from './Element'
 import ReactAddonsUpdate from 'react-addons-update'
 import ReactAddonsUpdate from 'react-addons-update'
 import EventEmitter from '../libs/eventEmitter'
 import EventEmitter from '../libs/eventEmitter'
 import $ from 'jquery'
 import $ from 'jquery'
-import autoBind from 'react-autobind'
+import autobind from 'autobind-decorator'
 
 
+@autobind
 export default class RegionalDesign extends React.Component {
 export default class RegionalDesign extends React.Component {
   constructor(props){
   constructor(props){
     super(props);
     super(props);
     this.state = {
     this.state = {
       data: null, loading: true, error: null, object_name: '', object_type: '', children_object_type: ''
       data: null, loading: true, error: null, object_name: '', object_type: '', children_object_type: ''
     };
     };
-    autoBind(this);
   }
   }
 
 
   getConfig(props, key) {
   getConfig(props, key) {