Компоненты, не реагирующие на вложенные хранилища mobx

Question

Я рендерил квадрат на основе вложенного хранилища (SquareModel) в MobX.При щелчке по квадрату я хотел бы, чтобы действие запускалось в пределах SquareModel, изменяя свойство selected, которое, в свою очередь, изменяло бы размер квадрата.Однако я не могу заставить квадрат реагировать на изменение собственности.Любые идеи о том, как заставить это работать?

Песочница: https://codesandbox.io/s/m51oyzz069

MainStore:

import { observable, decorate } from "mobx";
import SquareModel from "./SquareModel";

class MobXStore {
  square = new SquareModel();
}

decorate(MobXStore, {
  square: observable
});

export default new MobXStore();

NestedStore:

import { observable, action, decorate } from "mobx";

class SquareModel {
  selected = false;
  toggleSelection() {
    console.log("toggle selection");
    this.selected = !this.selected;
  }
}

decorate(SquareModel, {
  selected: observable,
  toggleSelection: action
});

export default SquareModel;

Реагировать:

const App = observer(() => {
  return (
    <svg className="App">
      <svg x={100} y={100}>
        <Square
          unit={MobXStore.square.selected ? 2 : 1}
          onPointerUp={MobXStore.square.toggleSelection}
        />
      </svg>
    </svg>
  );
});

export const Square = observer(({ unit, ...props }) => {
  console.log("render square");
  return (
    <g {...props}>
      <rect height={unit * 50} width={unit * 50} style={{ fill: "blue" }} />
    </g>
  );
});

Answer 1

В методе toggleSelection есть ошибка с «this»

Это должно выглядеть так:

onPointerUp = {() => MobXStore.square.toggleSelection()}

или вам нужно использовать, например, функцию стрелки здесь:

toggleSelection = () => {