fix ElementGroup mobx

src/components/ElementGroup.js

@@ -2,35 +2,22 @@ import React from 'react'
 import Element from './Element'
 import ReactAddonsUpdate from 'react-addons-update'
 import autobind from 'autobind-decorator'
+import { observer } from 'mobx-react'
 
 @autobind
+@observer
 export default class ElementGroup extends React.Component {
-  constructor(props){
-    super(props);
-    this.state = {
-      elements: [
-        { id: 1, name: "药库", initialPos: {x: 80, y: 70}, target_type: 'RegionalDesign::Repo' },
-        { id: 2, name: "药架", initialPos: {x: 80, y: 70 + 60}, target_type: 'RegionalDesign::DrugRepo' },
-        { id: 3, name: "药架格", initialPos: {x: 80, y: 70 + 60 * 2}, target_type: 'RegionalDesign::DrugBrandreth' }
-      ]
-    };
-  }
-
   cloneElement(element) {
-    const elements = ReactAddonsUpdate(this.state.elements, { $push: [element] })
-    this.setState({elements: elements})
+    this.props.ElementGroupStore.cloneElement(element)
   }
 
   deleteElement(element) {
-    const index = this.state.elements.indexOf(element)
-    const elements = ReactAddonsUpdate(this.state.elements, { $splice: [[index, 1]] })
-    this.setState({elements: elements})
+    this.props.ElementGroupStore.deleteElement(element)
   }
 
   // 返回element的index为-1, 删除最后一个元素
   deleteLastElement() {
-    const elements = ReactAddonsUpdate(this.state.elements, { $splice: [[-1, 1]] })
-    this.setState({elements: elements})
+    this.props.ElementGroupStore.deleteLastElement()
   }
 
   sidebar() {
@@ -41,7 +28,7 @@ export default class ElementGroup extends React.Component {
     return (
       <div>
         {
-          this.state.elements.map(function(element) {
+          this.props.ElementGroupStore.elements.map(function(element) {
             return (
               <Element meta_element={ element } key={ "key_" + element.id } id={ element.id } name={ element.name } initialPos={ element.initialPos } target_type={ element.target_type } handleCloneElement={ this.cloneElement } handleDeleteElement={ this.deleteElement } handleDeleteLastElement={ this.deleteLastElement } />
             )

src/containers/Spd.js

@@ -7,6 +7,9 @@ import EventEmitter from '../libs/eventEmitter'
 import headerModel from '../stores/HeaderStore'
 const headerStore = new headerModel()
 
+import ElementGroupModel from '../stores/ElementGroupStore'
+const ElementGroupStore = new ElementGroupModel()
+
 export default class Spd extends React.Component {
   componentDidMount() {
     EventEmitter.subscribe('alert', function(info){
@@ -46,7 +49,7 @@ export default class Spd extends React.Component {
         <div className="row">
           <div className="col-md-2 sidebar" id='sidebar'>
             <h3 className='sidebar-header'>元件</h3>
-            <ElementGroup />
+            <ElementGroup ElementGroupStore={ ElementGroupStore } />
           </div>
           <div id="dropzone" className="col-md-10 dropzone">
             {this.props.children}

src/stores/ElementGroupStore.js

+import { observable, useStrict, action } from 'mobx'
+
+useStrict(true)
+
+export default class headerStore {
+  @observable elements = [
+    { id: 1, name: "药库", initialPos: {x: 80, y: 70}, target_type: 'RegionalDesign::Repo' },
+    { id: 2, name: "药架", initialPos: {x: 80, y: 70 + 60}, target_type: 'RegionalDesign::DrugRepo' },
+    { id: 3, name: "药架格", initialPos: {x: 80, y: 70 + 60 * 2}, target_type: 'RegionalDesign::DrugBrandreth' }
+  ]
+
+  @action cloneElement(element) {
+    this.elements.push(element)
+  }
+
+  @action deleteElement(element) {
+    this.elements.remove(element)
+  }
+
+  @action deleteLastElement() {
+    this.elements.pop()
+  }
+}