MobX

Question

我有以下可观察的搜索引擎数组。

@observable favoriteSearchEngine = [
    { 'provider' : 'google', 'selected': true },
    { 'provider' : 'yahoo', 'selected': false },
    { 'provider' : 'bing', 'selected': false },
];

用户一次只能select一个来自UI。因此，例如，如果他们选择 yahoo，yahoo 将获得 selected: true，而任何其他提供商将获得 selected: false

此操作处理点击：

@action onClickFavoriteSearchEngine = (provider) => {
    alert(provider); // yahoo shows here
    // How to do this step, only selected provider true and falsify all others in the array?
}

Answer 1

我将介绍一个表示选择的可观察对象，并从中导出选定状态：

@observable selection = null
@observable  favoriteSearchEngine = [
    { 'provider' : 'google', 'selected': function() {
        return selection === this
    }
]

如果您现在将另一个引擎分配给选择几次，您将看到引擎的 selected 状态将相应更新

(N.B。如果像这样声明普通对象 + 派生，请不要使用箭头函数，以避免 this)

出现问题

Answer 2

@mweststrate 给出的解决方案效果很好，但由于您使用的是 action (which also is a transaction)，您可以取消select 之前的 selected，并且 select 新的，如果你愿意的话：

@action onClickFavoriteSearchEngine = (provider) => {
  alert(provider); // yahoo shows here

  favoriteSearchEngine.forEach(e => e.selected = false);
  favoriteSearchEngine.find(e => e.provider === provider).selected = true;
}

MobX - Select 数组中的单个项目，取消选择所有其他项目？

MobX - Select single item in array, unselect all others?