如何在Mobx + Reactjs中使用@Action？

Question

我对如何在代码中使用 @action 感到困惑。

class Items {

  @observable items= [];

  @action addItem() {
    let newItem= new Item();
    items.push(newItem);
  }
}

@observer
class ItemPage extends Component {

  constructor() {
    super();
  }

  render() {
    const {addItem} = this.props.store;
    return (
      <div className="items">
        <input type="button" value="add" onClick={addItem}/>
      </div>
    )
  }
}

const store = new Items();

- chobo2

Answer 1

请确保修改this.items而不是仅仅修改items。您还需要使用action.bound将操作绑定，或在组件中创建一个已绑定的处理程序：

class Items {
  @observable items= [];

  @action.bound
  addItem() {
    let newItem = new Item();
    this.items.push(newItem);
  }
}

@observer
class ItemPage extends Component {
  render() {
    const { addItem } = this.props.store;
    return (
      <div className="items">
        <input type="button" value="add" onClick={addItem}/>
      </div>
    );
  }
}

const store = new Items();

或者：

class Items {
  @observable items= [];

  @action
  addItem() {
    let newItem = new Item();
    this.items.push(newItem);
  }
}

@observer
class ItemPage extends Component {
  handleClick = () => {
    this.props.store.addItem();
  };
  render() {
    return (
      <div className="items">
        <input type="button" value="add" onClick={this.handleClick}/>
      </div>
    );
  }
}

const store = new Items();

- Tholle

---

@action.bound是更推荐的方式吗？如果你不使用它，似乎复制一个方法没有任何实际收益？ - chobo2

@chobo2 这实际上只是个人偏好问题。我个人倾向于在我的组件上创建处理程序，如果我需要做更多的事情而不仅仅是稍后调用操作，所以我通常选择第二个选项。 - Tholle

有什么原因吗，因为它似乎只是多了一点工作，但没有看到任何真正的收益。我还看到第三个选项，他们在组件本身中放置@action。 - chobo2

@Tholle讲解得非常好！非常清晰，我找不到比这更简单的解释了。谢谢！ - Antuan