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（这也是一个transaction）你可以取消选择先前选择的，并选择新的，如果你愿意的话：

@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国家将根据更新ly

（N.B.如果宣布一个普通的对象+推导这样不使用箭头功能，以避免问题与this）