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

Question

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

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

用户一次只能从 UI中选择一个。因此，如果他们选择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

@mweststrate 提供的解决方案效果很好，但是由于您正在使用一个操作（这也是一个事务），您可以取消选择以前选择的，如果您愿意，可以选择新的：

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

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

Answer 2

我将引入一个表示选择的可观察对象，并从中得出选择的状态：

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

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

（注意，如果像这样声明普通对象+派生，则不要使用箭头函数，以避免出现问题this）